#152 - wip
This commit is contained in:
parent
2a3e65ed5f
commit
dcc3808428
@ -1,148 +1,147 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
|
<section class="bg-white shadow-md">
|
||||||
<div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
|
<div class="flex items-center justify-between p-4 sm:px-6">
|
||||||
<div class="bg-white py-2">
|
<h2 class="text-lg font-medium leading-6 text-gray-900">
|
||||||
M<span class="sr-only sm:not-sr-only">on</span>
|
Kalendarz
|
||||||
</div>
|
</h2>
|
||||||
<div class="bg-white py-2">
|
<Menu
|
||||||
T<span class="sr-only sm:not-sr-only">ue</span>
|
as="div"
|
||||||
</div>
|
class="relative"
|
||||||
<div class="bg-white py-2">
|
>
|
||||||
W<span class="sr-only sm:not-sr-only">ed</span>
|
<MenuButton
|
||||||
</div>
|
type="button"
|
||||||
<div class="bg-white py-2">
|
class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
|
||||||
T<span class="sr-only sm:not-sr-only">hu</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white py-2">
|
|
||||||
F<span class="sr-only sm:not-sr-only">ri</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white py-2">
|
|
||||||
S<span class="sr-only sm:not-sr-only">at</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white py-2">
|
|
||||||
S<span class="sr-only sm:not-sr-only">un</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
|
|
||||||
<div class="w-full grid grid-cols-7 grid-rows-6 gap-px">
|
|
||||||
<div
|
|
||||||
v-for="day in days"
|
|
||||||
:key="day.date"
|
|
||||||
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'relative py-2 px-3']"
|
|
||||||
>
|
>
|
||||||
<time
|
{{ viewMode }} view
|
||||||
:datetime="day.date"
|
<ChevronDownIcon
|
||||||
:class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
|
class="ml-2 h-5 w-5 text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</MenuButton>
|
||||||
|
|
||||||
|
<transition
|
||||||
|
class="z-10"
|
||||||
|
enter-active-class="transition ease-out duration-100"
|
||||||
|
enter-from-class="transform opacity-0 scale-95"
|
||||||
|
enter-to-class="transform opacity-100 scale-100"
|
||||||
|
leave-active-class="transition ease-in duration-75"
|
||||||
|
leave-from-class="transform opacity-100 scale-100"
|
||||||
|
leave-to-class="transform opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<MenuItems class="absolute right-0 mt-3 w-36 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||||
|
<div class="py-1">
|
||||||
|
<MenuItem v-slot="{ active }">
|
||||||
|
<a
|
||||||
|
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
|
||||||
|
@click="updateViewMode('week')"
|
||||||
|
>Week view</a>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem v-slot="{ active }">
|
||||||
|
<a
|
||||||
|
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']"
|
||||||
|
@click="updateViewMode('month')"
|
||||||
|
>Month view</a>
|
||||||
|
</MenuItem>
|
||||||
|
</div>
|
||||||
|
</MenuItems>
|
||||||
|
</transition>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
<div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
|
||||||
|
<div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
|
||||||
|
<div :class="[viewMode === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
|
||||||
|
<div
|
||||||
|
v-for="day in days"
|
||||||
|
:key="day.date"
|
||||||
|
class="flex flex-col"
|
||||||
|
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', 'day relative py-2 px-3']"
|
||||||
>
|
>
|
||||||
{{ day.date.split('-').pop().replace(/^0/, '') }}
|
<time
|
||||||
</time>
|
:datetime="day.date"
|
||||||
<ol
|
:class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
|
||||||
v-if="day.events.length > 0"
|
|
||||||
class="mt-2"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
v-for="event in day.events.slice(0, 2)"
|
|
||||||
:key="event.id"
|
|
||||||
>
|
>
|
||||||
<a
|
{{ day.date.split('-').pop().replace(/^0/, '') }}
|
||||||
:href="event.href"
|
</time>
|
||||||
class="group flex"
|
</div>
|
||||||
>
|
|
||||||
<p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
|
|
||||||
{{ event.name }}
|
|
||||||
</p>
|
|
||||||
<time
|
|
||||||
:datetime="event.datetime"
|
|
||||||
class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block"
|
|
||||||
>
|
|
||||||
{{ event.time }}
|
|
||||||
</time>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li
|
|
||||||
v-if="day.events.length > 2"
|
|
||||||
class="text-gray-500"
|
|
||||||
>
|
|
||||||
+ {{ day.events.length - 2 }} more
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
const days = [
|
import { ChevronDownIcon } from '@heroicons/vue/solid'
|
||||||
{ date: '2021-12-27', events: [] },
|
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
|
||||||
{ date: '2021-12-28', events: [] },
|
import { ref, watch } from 'vue'
|
||||||
{ date: '2021-12-29', events: [] },
|
import { DateTime } from 'luxon'
|
||||||
{ date: '2021-12-30', events: [] },
|
|
||||||
{ date: '2021-12-31', events: [] },
|
let days = ref([])
|
||||||
{ date: '2022-01-01', isCurrentMonth: true, events: [] },
|
const viewMode = ref('week')
|
||||||
{ date: '2022-01-02', isCurrentMonth: true, events: [] },
|
watch(viewMode, () => {
|
||||||
{
|
loadMonth()
|
||||||
date: '2022-01-03',
|
})
|
||||||
isCurrentMonth: true,
|
loadMonth()
|
||||||
events: [
|
|
||||||
{ id: 1, name: 'Design review', time: '10AM', datetime: '2022-01-03T10:00', href: '#' },
|
function loadMonth() {
|
||||||
{ id: 2, name: 'Sales meeting', time: '2PM', datetime: '2022-01-03T14:00', href: '#' },
|
const tmpDays = []
|
||||||
],
|
const currentMonth = DateTime.fromObject({ year: 2022, month: 6 }).startOf('month')
|
||||||
},
|
|
||||||
{ date: '2022-01-04', isCurrentMonth: true, events: [] },
|
const start = currentMonth.startOf('week')
|
||||||
{ date: '2022-01-05', isCurrentMonth: true, events: [] },
|
const end = viewMode.value === 'week' ? currentMonth.endOf('week') : currentMonth.endOf('month').endOf('week')
|
||||||
{ date: '2022-01-06', isCurrentMonth: true, events: [] },
|
|
||||||
{
|
for (let day = start; day < end; day = day.plus({ day: 1 })) {
|
||||||
date: '2022-01-07',
|
const isCurrentMonth = isInCurrentMonth(day, currentMonth)
|
||||||
isCurrentMonth: true,
|
const okIsToday = isToday(day)
|
||||||
events: [{ id: 3, name: 'Date night', time: '6PM', datetime: '2022-01-08T18:00', href: '#' }],
|
|
||||||
},
|
tmpDays.push({
|
||||||
{ date: '2022-01-08', isCurrentMonth: true, events: [] },
|
date: day.toISODate(),
|
||||||
{ date: '2022-01-09', isCurrentMonth: true, events: [] },
|
isCurrentMonth,
|
||||||
{ date: '2022-01-10', isCurrentMonth: true, events: [] },
|
isToday: okIsToday,
|
||||||
{ date: '2022-01-11', isCurrentMonth: true, events: [] },
|
})
|
||||||
{
|
}
|
||||||
date: '2022-01-12',
|
|
||||||
isCurrentMonth: true,
|
days.value = tmpDays
|
||||||
isToday: true,
|
}
|
||||||
events: [{ id: 6, name: "Sam's birthday party", time: '2PM', datetime: '2022-01-25T14:00', href: '#' }],
|
|
||||||
},
|
function updateViewMode(type) {
|
||||||
{ date: '2022-01-13', isCurrentMonth: true, events: [] },
|
viewMode.value = type
|
||||||
{ date: '2022-01-14', isCurrentMonth: true, events: [] },
|
}
|
||||||
{ date: '2022-01-15', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-16', isCurrentMonth: true, events: [] },
|
function isInCurrentMonth(date, currentMonth) {
|
||||||
{ date: '2022-01-17', isCurrentMonth: true, events: [] },
|
return currentMonth.hasSame(date, 'month')
|
||||||
{ date: '2022-01-18', isCurrentMonth: true, events: [] },
|
}
|
||||||
{ date: '2022-01-19', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-20', isCurrentMonth: true, events: [] },
|
function isToday(date) {
|
||||||
{ date: '2022-01-21', isCurrentMonth: true, events: [] },
|
return date.toISODate() === DateTime.local().toISODate()
|
||||||
{
|
}
|
||||||
date: '2022-01-22',
|
|
||||||
isCurrentMonth: true,
|
|
||||||
isSelected: true,
|
|
||||||
events: [
|
|
||||||
{ id: 4, name: 'Maple syrup museum', time: '3PM', datetime: '2022-01-22T15:00', href: '#' },
|
|
||||||
{ id: 5, name: 'Hockey game', time: '7PM', datetime: '2022-01-22T19:00', href: '#' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{ date: '2022-01-23', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-24', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-25', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-26', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-27', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-28', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-29', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-30', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-01-31', isCurrentMonth: true, events: [] },
|
|
||||||
{ date: '2022-02-01', events: [] },
|
|
||||||
{ date: '2022-02-02', events: [] },
|
|
||||||
{
|
|
||||||
date: '2022-02-03',
|
|
||||||
events: [{ id: 7, name: 'Cinema with friends', time: '9PM', datetime: '2022-02-04T21:00', href: '#' }],
|
|
||||||
},
|
|
||||||
{ date: '2022-02-04', events: [] },
|
|
||||||
{ date: '2022-02-05', events: [] },
|
|
||||||
{ date: '2022-02-06', events: [] },
|
|
||||||
]
|
|
||||||
const selectedDay = days.find((day) => day.isSelected)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="css">
|
||||||
|
.day:nth-of-type(7n - 6):before {
|
||||||
|
content: "Pn";
|
||||||
|
}
|
||||||
|
|
||||||
|
.day:nth-of-type(7n - 5):before {
|
||||||
|
content: "Wt";
|
||||||
|
}
|
||||||
|
|
||||||
|
.day:nth-of-type(7n - 4):before {
|
||||||
|
content: "Śr";
|
||||||
|
}
|
||||||
|
|
||||||
|
.day:nth-of-type(7n - 3):before {
|
||||||
|
content: "Cz";
|
||||||
|
}
|
||||||
|
|
||||||
|
.day:nth-of-type(7n - 2):before {
|
||||||
|
content: "Pt";
|
||||||
|
}
|
||||||
|
|
||||||
|
.day:nth-of-type(7n - 1):before {
|
||||||
|
content: "Sb";
|
||||||
|
}
|
||||||
|
|
||||||
|
.day:nth-of-type(7n):before {
|
||||||
|
content: "Nd";
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user