Responsive calendar
This commit is contained in:
pooyarhz99
parent
42fd9de6af
commit
e068776b89
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -34,8 +34,8 @@
|
|||
<div class="vx-row no-gutter mb-4">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<div class="vx-col w-1/3 items-center sm:flex hidden">
|
||||
<div class="p-2 flex justify-between items-center gap-x-4">
|
||||
<div class="vx-col w-full md:w-1/2 xl:w-3/5 3xl:w-1/3 mb-4 lg:mb-0 items-center flex flex-row flex-nowrap lg:flex-row justify-center md:justify-start items-center">
|
||||
<div class="p-2 flex justify-between items-center gap-x-1 lg:gap-x-4">
|
||||
<feather-icon
|
||||
:icon="$vs.rtl ? 'ChevronRightIcon' : 'ChevronLeftIcon'"
|
||||
@click="updateMonth(-1)"
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<!-- class="border rounded border-grey border-solid"-->
|
||||
<!-- style="width: 10rem;"-->
|
||||
<!-- >-->
|
||||
<span class="cursor-pointer text-primary">{{showDate | month}}</span>
|
||||
<span class="cursor-pointer text-primary text-sm lg:text-base" style="text-wrap: nowrap;">{{showDate | month}}</span>
|
||||
<!-- <feather-icon icon="CalendarIcon" svg-classes="text-grey w-4 h-4"></feather-icon>-->
|
||||
<!-- </div>-->
|
||||
</a-month-picker>
|
||||
|
|
@ -58,32 +58,33 @@
|
|||
class="cursor-pointer text-primary"
|
||||
/>
|
||||
</div>
|
||||
<a-radio-group v-model="calendarFilter" class="mx-6">
|
||||
<a-radio-group v-model="calendarFilter" class="lg:mx-6">
|
||||
<a-radio-button value="events" @click="fetchCalendar">
|
||||
<span class="inline-flex items-center gap-x-2">
|
||||
<span class="inline-flex items-center gap-x-1 text-sm lg:text-base">
|
||||
<feather-icon icon="CalendarIcon" svg-classes="text-grey w-4 h-4"></feather-icon>
|
||||
Events
|
||||
</span>
|
||||
</a-radio-button>
|
||||
<a-radio-button value="tasks" @click="fetchCalendar">
|
||||
<span class="inline-flex items-center gap-x-2">
|
||||
<span class="inline-flex items-center gap-x-1 text-sm lg:text-base">
|
||||
<feather-icon icon="CheckSquareIcon" svg-classes="text-grey w-4 h-4"></feather-icon>
|
||||
Tasks
|
||||
</span>
|
||||
</a-radio-button>
|
||||
<a-radio-button value="both" @click="fetchCalendar" style="padding-top: 0.15rem;">
|
||||
<a-radio-button value="both" @click="fetchCalendar" class="text-sm lg:text-base fix-padding-trick">
|
||||
All
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div> <!-- END BUTTONS -->
|
||||
|
||||
<!-- DATE SELECTION -->
|
||||
<div class="vx-col sm:w-1/3 w-full sm:my-0 my-3 flex sm:justify-end justify-center order-last">
|
||||
<div class="vx-col w-1/2 md:w-full xl:w-1/5 3xl:w-1/3 sm:my-0 my-3 flex sm:justify-end justify-center order-last">
|
||||
<a-button
|
||||
v-if="hasPermission('calendar.event.create')"
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="openAddNewEvent(new Date())"
|
||||
class="text-sm lg:text-base"
|
||||
style="border-radius: 3px !important;"
|
||||
>
|
||||
Add event
|
||||
|
|
@ -106,13 +107,13 @@
|
|||
</div> <!-- END DATE SELECTION -->
|
||||
|
||||
<!-- CALENDAR VIEW SELECTION -->
|
||||
<div class="vx-col sm:w-1/3 w-full flex justify-center">
|
||||
<div class="vx-col w-1/2 xl:w-1/5 3xl:w-1/3 flex justify-center items-center">
|
||||
<template v-for="(view, index) in calendarViewTypes">
|
||||
<a-button
|
||||
v-if="calendarView === view.val"
|
||||
:key="String(view.val) + 'filled'"
|
||||
type="primary"
|
||||
class="p-1 md:px-8"
|
||||
class="p-1 px-2 md:px-8 text-sm lg:text-base"
|
||||
:class="{'rounded-l-none': index > 0, 'rounded-r-none': calendarViewTypes.length !== index+1}"
|
||||
@click="calendarView = view.val"
|
||||
ghost
|
||||
|
|
@ -121,7 +122,7 @@
|
|||
v-else
|
||||
:key="String(view.val) + 'border'"
|
||||
type="border"
|
||||
class="p-1 md:px-8 !rounded-[3px]"
|
||||
class="p-1 px-2 md:px-8 !rounded-[3px] text-sm lg:text-base"
|
||||
:class="{'rounded-l-none': index > 0, 'rounded-r-none': calendarViewTypes.length !== index+1}"
|
||||
@click="calendarView = view.val"
|
||||
>{{ view.label }}</a-button>
|
||||
|
|
@ -1317,4 +1318,7 @@ export default {
|
|||
.theme-default .cv-event.danger svg { stroke: #ea5455; }
|
||||
.theme-default .cv-event.warning svg { stroke: #ff9f43; }
|
||||
.theme-default .cv-event.success svg { stroke: #28c76f; }
|
||||
|
||||
.fix-padding-trick { padding-top: 0.2rem; }
|
||||
@media (min-width: 1200px) { .fix-padding-trick { padding-top: 0.15rem; } }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ tbl.add(new Xtc('is_for_firm', 'Firm Event').hidden().renderSlot('is_for_firm'))
|
|||
tbl.add(new Xtc('labels', 'Priority').renderSlot('labels'))
|
||||
tbl.add(new Xtc('start', 'Start date').renderSlot('start'))
|
||||
tbl.add(new Xtc('end', 'End date').renderSlot('end'))
|
||||
tbl.add(new Xtc('tags', 'Tags').renderSlot('tags'))
|
||||
tbl.add(new Xtc('tags', 'Tags').hidden().renderSlot('tags'))
|
||||
tbl.add(new Xtc('', 'Attendees').renderSlot('attendees'))
|
||||
tbl.add(new Xtc('matter', 'Matter').renderSlot('matter'))
|
||||
tbl.add(new Xtc('description', 'Description').renderSlot('description'))
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ module.exports = {
|
|||
'md': '768px',
|
||||
'lg': '992px',
|
||||
'xl': '1200px',
|
||||
'2xl': '1440px',
|
||||
'3xl': '1600px',
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
|
|||
Loading…
Reference in New Issue