I am started working on Full Calender with Vue. I tried but not able to adopt some of the functionalities on Full Calendar. Like:

1. How to add columnHeaderFormat like- for Month - Monday, Tuesday , for week- Mon 08/11

2. 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.

3. How to add Default Date in Full Calendar.

4. How to add event Limit in FC.

   CODE: TEMPLATE: <full-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

CodePudding user response：

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
}

CodePudding user response：

For default load, event limit and day format:

• initialDate: '2021-11-01'
• dayMaxEvents: 2,
• dayHeaderFormat: { weekday: 'long', month: 'numeric', day: 'numeric', omitCommas: true }

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'
>         }
>       }
>     };   
}