Commit 1d5be5e3 authored by Kent Nielsen's avatar Kent Nielsen
Browse files

Calender layout fixed in both sizes

parent d857ae41
......@@ -4,6 +4,20 @@
<thead>
<!-- Generating first header of schema -->
<tr>
<th id="calendarHead" colspan="6">
<div style="display:flex;">
<div style="flex-grow: 25">
<button id="offSizeButton" @click="prevWeek()"> &larr; </button>
</div>
<div style="flex-grow: 50">
Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}
</div>
<div style="flex-grow: 25;">
<button @click="nextWeek()"> &rarr; </button>
</div>
</div>
</th>
<!--
<th>
<div>
<button id="offSizeButton" @click="prevWeek()"> &larr; </button>
......@@ -15,14 +29,22 @@
<button @click="nextWeek()"> &rarr; </button>
</div>
</th>
-->
</tr>
<tr>
<!-- Empty cell to make monday move 1 cell left -->
<th></th>
<!-- Generating weekday names and month number-->
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
</th>
<template v-if="schedule.length == 1">
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[today.getDay()-1]}} - {{today.getDate()}}
</th>
</template>
<template v-else>
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
</th>
</template>
</tr>
</thead>
<tbody>
......@@ -183,20 +205,37 @@ export default {
},
updateDaysInDisplay(){
if(parseInt(document.getElementById("calendar").clientWidth) < 300){
if(parseInt(document.getElementById("calendar").clientWidth) < 400){
this.colSpanValue = 5;
this.schedule = this.scheduleDay;
}else{
this.colSpanValue = 1;
this.schedule=this.scheduleWeek12;
}
},
initToday(){
const firstDayOfWeek = this.getDateOfISOWeek(this.getWeek(this.today), this.today.getFullYear(),0).getDate();
const lastDayOfWeek = this.getDateOfISOWeek(this.getWeek(this.today), this.today.getFullYear(),4).getDate();
console.log(this.today.getDate())
if(this.today.getDate() > lastDayOfWeek || this.today.getDate() < firstDayOfWeek){
while(this.today.getDate() < lastDayOfWeek){
this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate()-1);
}
}
}
},
mounted(){
this.updateHalfHourSize();
this.updateDaysInDisplay();
this.initToday();
window.addEventListener("resize", this.updateDaysInDisplay)
console.log(this.today.getDay())
// Update en data variable, da alle td også skal have colspan
},
updated(){
this.updateHalfHourSize();
this.updateDaysInDisplay();
}
}
</script>
......@@ -214,7 +253,9 @@ export default {
height: 100%;
tr{
height: 37px;
&:first-of-type{
height: 37px;
}
th{
height: 28px;
......@@ -228,25 +269,12 @@ export default {
vertical-align: middle;
margin-bottom: 4px;
}
&:last-child{
height: auto;
th{
height: auto;
}
}
}
th{
background-color: $theme-color;
color: $lightest-theme-color;
width: 16.6666%;
padding: 1px;
&:first-of-type{
width: 7%;
}
padding: 1px;
}
}
......@@ -267,6 +295,10 @@ export default {
align-items: center;
vertical-align: middle;
&:first-of-type{
width: 10%;
}
&:first-child{
background-color: $theme-color;
color: $lightest-theme-color;
......@@ -326,11 +358,12 @@ export default {
box-sizing: border-box;
box-shadow: 1px 1px 3px black;
}
/*
#offSizeButton{
width: 122%;
margin-left: 60%;
}
*/
}
#skematd{
......@@ -344,4 +377,14 @@ export default {
position: relative;
box-sizing: border-box;
}
#calendarHead{
width: 100%;
padding: 0;
div{
margin: 0;
line-height: 28px;
}
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment