<div class="atm-table-wrapper">
<div class="table-responsive">
<div class='title'>
<h4 class="atm-heading ">Biologie</h4>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<table>
<tr>
<th>Werkvorm</th>
<th>Datum</th>
<th>Omschrijving</th>
</tr>
<tr>
<td>Labo</td>
<td>
<div class="mb-4">
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
<div class="mb-4">
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
<a href="#" class="atm-link " aria-label="" title="Werkvorm toevoegen">
<span class="text">Werkvorm toevoegen</span>
<span class="atm-icon far fa-plus-circle " aria-hidden="true"></span>
</a>
</td>
<td><textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea></td>
<td class="icon-delete"><a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</td>
</tr>
<tr>
<td>Groepswerk</td>
<td>
<div class="mb-4">
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
<a href="#" class="atm-link " aria-label="" title="Werkvorm toevoegen">
<span class="text">Werkvorm toevoegen</span>
<span class="atm-icon far fa-plus-circle " aria-hidden="true"></span>
</a>
</td>
<td><textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea></td>
<td class="icon-delete"><a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</td>
</tr>
</table>
</div>
<div class="table-list">
<div class='title'>
<h3 class="atm-heading ">Biologie</h3>
<a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
<ul>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Labo</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<td>
<div class="mb-4">
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
<div class="mb-4">
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
<a href="#" class="atm-link " aria-label="" title="Werkvorm toevoegen">
<span class="text">Werkvorm toevoegen</span>
<span class="atm-icon far fa-plus-circle " aria-hidden="true"></span>
</a>
</td>
</div>
<div class="item">
<div><span>Omschrijving</span></div>
<div><textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea></div>
</div>
<div class="item">
<div class="icon"><a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="item">
<div><span>Werkvorm</span></div>
<div>Groepswerk</div>
</div>
<div class="item">
<div><span>Datum</span></div>
<td>
<div class="mb-4">
<div>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css' />
<script src='https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js' defer></script>
<style>
[x-cloak] {
display: none;
}
</style>
<div class='antialiased sans-serif'>
<div x-data='app()' x-init='[initDate(), getNoOfDays()]' x-cloak>
<div class='container'>
<div class='relative'>
<input type='hidden' name='date' x-ref='date' />
<input type='text' readonly x-model='datepickerValue' @click='showDatepicker = !showDatepicker' @keydown.escape='showDatepicker = false' class='w-full pl-4 pr-10 py-3 leading-none rounded-lg shadow-sm focus:outline-none focus:shadow-outline text-gray-600 font-medium' placeholder='Select date' />
<div class='absolute top-0 right-0 px-3 py-2'>
<svg class='h-6 w-6 text-gray-400' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path>
</svg>
</div>
<div class='bg-white mt-12 rounded-lg shadow p-4 absolute top-0 left-0 z-10' style='width: 17rem' x-show.transition='showDatepicker' @click.away='showDatepicker = false'>
<div class='flex justify-between items-center mb-2'>
<div>
<span x-text='MONTH_NAMES[month]' class='text-lg font-bold text-gray-800'></span>
<span x-text='year' class='ml-1 text-lg text-gray-600 font-normal'></span>
</div>
<div>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 0 }" :disabled='month == 0 ? true : false' @click='month--; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'></path>
</svg>
</button>
<button type='button' class='transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full' :class="{'cursor-not-allowed opacity-25': month == 11 }" :disabled='month == 11 ? true : false' @click='month++; getNoOfDays()'>
<svg class='h-6 w-6 text-gray-500 inline-flex' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'></path>
</svg>
</button>
</div>
</div>
<div class='flex flex-wrap mb-3 -mx-1'>
<template x-for='(day, index) in DAYS' :key='index'>
<div style='width: 14.26%' class='px-1'>
<div x-text='day' class='text-gray-800 font-medium text-center text-xs'></div>
</div>
</template>
</div>
<div class='flex flex-wrap -mx-1'>
<template x-for='blankday in blankdays'>
<div style='width: 14.28%' class='text-center border p-1 border-transparent text-sm'></div>
</template>
<template x-for='(date, dateIndex) in no_of_days' :key='dateIndex'>
<div style='width: 14.28%' class='px-1 mb-1'>
<div @click='getDateValue(date)' x-text='date' class='cursor-pointer text-center text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100' :class="{'bg-blue-500 text-white': isToday(date) == true, 'text-gray-700 hover:bg-blue-200': isToday(date) == false }"></div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<script>
const MONTH_NAMES = ["January", "February", "March", "April",
"May", "June", "July", "August", "September", "October", "November",
"December",
];
const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu",
"Fri", "Sat"
];
function app() {
return {
showDatepicker: false,
datepickerValue: "",
month: "",
year: "",
no_of_days: [],
blankdays: [],
days: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
initDate() {
let today = new Date();
this.month = today.getMonth();
this.year = today.getFullYear();
this.datepickerValue = new Date(
this.year, this.month, today.getDate()).toDateString();
},
isToday(date) {
const today = new Date();
const d = new
Date(this.year, this.month, date);
return today.toDateString() ===
d.toDateString() ? true : false;
},
getDateValue(date) {
let
selectedDate = new Date(this.year, this.month, date);
this.datepickerValue = selectedDate.toDateString();
this.$refs.date.value = selectedDate.getFullYear() + "-" + ("0" +
selectedDate.getMonth()).slice(-2) + "-" + ("0" +
selectedDate.getDate()).slice(-2);
console.log(this.$refs.date.value);
this.showDatepicker = false;
},
getNoOfDays() {
let daysInMonth = new Date(this.year, this.month +
1, 0).getDate(); // find where to start calendar day of week let
dayOfWeek = new Date(this.year, this.month).getDay();
let
blankdaysArray = [];
for (var i = 1; i <= dayOfWeek; i++) {
blankdaysArray.push(i);
}
let daysArray = [];
for (var i = 1; i <=
daysInMonth; i++) {
daysArray.push(i);
}
this.blankdays =
blankdaysArray;
this.no_of_days = daysArray;
},
};
}
</script>
</div>
</div>
</div>
<a href="#" class="atm-link " aria-label="" title="Werkvorm toevoegen">
<span class="text">Werkvorm toevoegen</span>
<span class="atm-icon far fa-plus-circle " aria-hidden="true"></span>
</a>
</td>
</div>
<div class="item">
<div><span>Omschrijving</span></div>
<div><textarea name="textarea" id="textarea" placeholder="placeholder" class="form-textarea "></textarea></div>
</div>
<div class="item">
<div class="icon"><a href="#" class="atm-link icon-delete" aria-label="" title="Verwijder item">
<span class="atm-icon far fa-times " aria-hidden="true"></span>
<span class="text">Verwijder item</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="atm-table-wrapper">
<div class="table-responsive">
{{#if tableHeading}}
<div class='title'>
{{render '@app-heading--h4' heading merge=true}}
{{render '@app-link' icon-delete merge=true}}
</div>
{{/if}}
<table>
{{#if headerRow}}
<tr>
{{#if headerCol}}
<th></th>
{{/if}}
{{#each headerRow}}
<th>{{text}}</th>
{{/each}}
</tr>
{{/if}}
{{#each rows}}
<tr>
{{#if ../headerCol}}
{{#with (lookup ../headerCol @index) as |header|}}
<th class="head">{{header.text}}</th>
{{/with}}
{{/if}}
{{#each cells}}
{{#if text}}
<td>{{text}}</td>
{{/if}}
{{#if status-accept}}
<td> {{render '@app-tag--tag-accept'}}</td>
{{/if}}
{{#if status-reject}}
<td> {{render '@app-tag--tag-reject'}}</td>
{{/if}}
{{#if status-applied}}
<td> {{render '@app-tag--tag-applied'}}</td>
{{/if}}
{{#if details}}
<td>
<p><span>{{details.title}}</span></p>
<p><span>Datum:</span>{{details.date}}</p>
<p><span>Tijd:</span>{{details.time}}</p>
<p><span>Lokaal:</span>{{details.locale}}</p>
</td>
{{/if}}
{{#if date-picker}}
<td>{{render '@app-date-picker'}}</td>
{{/if}}
{{#if dates}}
<td>
{{#each dates}}
<div class="mb-4">
{{render '@app-date-picker'}}
</div>
{{/each}}
{{render '@app-link--icon-after' add-date-link merge=true}}
</td>
{{/if}}
{{#if checkbox}}
<td>{{render '@app-checkbox'}}</td>
{{/if}}
{{#if text-area}}
<td>{{render '@app-textarea'}}</td>
{{/if}}
{{#if delete}}
<td class="icon-delete">{{render '@app-link' icon-delete merge=true}}</td>
{{/if}}
{{/each}}
</tr>
{{/each}}
</table>
</div>
<div class="table-list">
{{#if tableHeading}}
<div class='title'>
{{render '@app-heading--h3' heading merge=true}}
{{render '@app-link' icon-delete merge=true}}
</div>
{{/if}}
<ul>
{{#each rows}}
<li>
{{#with (lookup ../headerCol @index) as |header|}}
<span>{{header.text}}</span>
{{/with}}
<div class="wrapper">
{{#each cells}}
<div class="item">
{{#if ../../headerRow}}
{{#with (lookup ../../headerRow @index) as |header|}}
<div {{header.attributes}}><span>{{header.text}}</span></div>
{{/with}}
{{/if}}
{{#if delete}}
<div class="icon">{{render '@app-link' icon-delete merge=true}}</div>
{{/if}}
{{#if text}}
<div>{{text}}</div>
{{/if}}
{{#if status-accept}}
<div> {{render '@app-tag--tag-accept'}}</div>
{{/if}}
{{#if status-reject}}
<div> {{render '@app-tag--tag-reject'}}</div>
{{/if}}
{{#if status-applied}}
<div> {{render '@app-tag--tag-applied'}}</div>
{{/if}}
{{#if details}}
<div>
<p>{{details.title}}</p>
<p><span>Datum:</span>{{details.date}}</p>
<p><span>Tijd:</span>{{details.time}}</p>
<p><span>Lokaal:</span>{{details.locale}}</p>
</div>
{{/if}}
{{#if date-picker}}
<div>{{render '@app-date-picker'}}</div>
{{/if}}
{{#if dates}}
<td>
{{#each dates}}
<div class="mb-4">
{{render '@app-date-picker'}}
</div>
{{/each}}
{{render '@app-link--icon-after' add-date-link merge=true}}
</td>
{{/if}}
{{#if checkbox}}
<div>{{render '@app-checkbox'}}</div>
{{/if}}
{{#if text-area}}
<div>{{render '@app-textarea'}}</div>
{{/if}}
</div>
{{/each}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
{
"tableHeading": true,
"heading": {
"text": "Biologie"
},
"icon-delete": {
"title": "Verwijder item",
"text": "Verwijder item",
"modifier": "icon-delete",
"iconBefore": {
"icon": "fa-times",
"style": "far"
}
},
"headerRow": [
{
"text": "Werkvorm"
},
{
"text": "Datum"
},
{
"text": "Omschrijving"
}
],
"rows": [
{
"cells": [
{
"text": "Labo"
},
{
"dates": [
{
"date-picker": true
},
{
"date-picker": true
}
],
"add-date-link": {
"title": "Werkvorm toevoegen",
"text": "Werkvorm toevoegen",
"iconAfter": {
"icon": "fa-plus-circle",
"style": "far"
}
}
},
{
"text-area": true
},
{
"delete": true,
"icon-delete": {
"title": "Verwijder item",
"text": "Verwijder item",
"modifier": "icon-delete",
"iconBefore": {
"icon": "fa-times",
"style": "far"
}
}
}
]
},
{
"cells": [
{
"text": "Groepswerk"
},
{
"dates": [
{
"date-picker": true
}
],
"add-date-link": {
"title": "Werkvorm toevoegen",
"text": "Werkvorm toevoegen",
"iconAfter": {
"icon": "fa-plus-circle",
"style": "far"
}
}
},
{
"text-area": true
},
{
"delete": true,
"icon-delete": {
"title": "Verwijder item",
"text": "Verwijder item",
"modifier": "icon-delete",
"iconBefore": {
"icon": "fa-times",
"style": "far"
}
}
}
]
}
]
}
.atm-table-wrapper {
@apply overflow-x-auto border-gray-700;
textarea {
@apply w-full md:w-52 mr-10 mt-2 md:mt-0;
}
.table-responsive {
@apply hidden md:block w-full;
.title {
@apply relative pt-1;
.atm-link {
@apply absolute right-1 top-1 text-red;
}
}
.icon-delete {
@apply absolute right-4 top-4;
@apply text-red;
.atm-icon,
.atm-link span {
@apply text-red;
@apply font-bold;
}
.text {
@apply hidden;
}
}
table {
@apply w-full lg:table-fixed;
th {
@apply w-full bg-white;
}
tr:first-child {
@apply border-none;
}
tr {
@apply border-r border-l-2 border-b border-gray-700 relative;
th {
@apply bg-gray-700 p-4 font-semibold text-left border-solid border-gray-700;
}
.head {
@apply align-top;
}
td {
@apply p-4 align-top border-solid whitespace-nowrap lg:whitespace-normal;
}
}
.atm-link {
@apply text-green;
.text {
@apply underline;
}
}
}
}
.table-list {
@apply block md:hidden;
.atm-link {
@apply text-green;
.text {
@apply underline;
}
}
.icon-delete {
@apply absolute right-4 top-4;
@apply text-red;
.atm-icon,
.atm-link span {
@apply text-red;
@apply font-bold;
}
.text {
@apply hidden;
}
}
.title {
@apply relative pt-4;
.icon {
@apply right-1 top-4;
}
span {
@apply font-bold;
}
}
.wrapper {
@apply relative;
.item .atm-link {
@apply font-normal;
}
}
ul {
li {
&:not(:last-child) {
@apply md:mb-4;
}
.wrapper {
@apply bg-white m-0 md:m-[5px] md:mb-8 p-8 border border-solid border-gray-700 shadow-xl;
.item {
@apply mb-4;
}
}
}
}
}
}
No notes defined.