I am started working on Full Calender with Vue. I tried but not able to adopt some of the functionalities on Full Calendar. Like:
How to add columnHeaderFormat like- for Month - Monday, Tuesday , for week- Mon 08/11
How to show only scheduled timing on week Calendar. e.g.- if event is from 2pm to 4pm then only this 2hours should be shown for Week/day Calendar.
How to add Default Date in Full Calendar.
How to add event Limit in FC.
CODE:
TEMPLATE: <full-calendar class="calendar" :options="calendarOptions"/>
SCRIPT: data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: this.eventDates,
eventDisplay: 'block',
displayEventTime: false,
allDaySlot: false
}
CodeSandBox Link: https://codesandbox.io/s/vue-fullcalendar-scheduler-example-forked-0vgy6?file=/components/Calendar.vue
Kindly help me out on this. Your answer would be greatly appreciated. Thanks
based on the documentation here https://fullcalendar.io/docs/dayHeaderFormat
// like 'Mon', for month view
{ weekday: 'short' }
// like 'Mon 9/7', for week views
{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }
// like 'Monday', for day views
{ weekday: 'long' }
var calendar = new Calendar(calendarEl, {
views: {
dayGrid: {
weekday: 'long'
}
}
});
to apply to your code
return {
calendarOptions: {
views: {
dayGrid: {
weekday: 'long'
}
},
plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: this.eventDates,
eventDisplay: 'block',
displayEventTime: false,
allDaySlot: false
}
consolidate code:
> data() {
> return {
> calendarOptions: {
> plugins: [dayGridPlugin, interactionPlugin, listPlugin, timeGridPlugin],
> initialView: 'dayGridMonth',
> headerToolbar: {
> left: 'today prev,next',
> center: 'title',
> right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
> },
> events: this.eventDates,
> eventDisplay: 'block',
> displayEventTime: false,
> allDaySlot: false,
> initialDate: this.startingDate,
> dayMaxEvents: 2,
> dayHeaderFormat: {
> weekday: 'long', month: 'numeric', day: 'numeric', omitCommas: true
> },
> expandRows: true,
> slotEventOverlap: false,
> buttonText: {
> today: 'Today',
> month: 'Month',
> week: 'Week',
> day: 'Day'
> }
> }
> };
}