[FullCalendar 2] FullCalendar2 show or hide week,list views

Forge Component
(26)
Published on 29 Mar by Daniel Filipe
26 votes
Published on 29 Mar by Daniel Filipe

How to show List view and week view in full calendar 2. My calendar just has arrows and today button.

// List View

var calendar = new FullCalendar.Calendar(calendarEl, { 

plugins: [ 'list' ], 

defaultView: 'listWeek'

 });

// Week View

let calendar = new Calendar(calendarEl, { 

   plugins: [ dayGridPlugin ],  

  defaultView: 'dayGridWeek'

});

Hi Sai, 

I just pasted the javascript snippets above for both the views (list and week). You should instantiate the object with the desired view as an option.

Regards,

Swatantra

If i'm not mistaken you can also enable that in the JSON file for the FullCalendar. 


I am not sure where to write the java script or JSON because I dont see anything in properties of fullcalendar2


Its in the ADVANCED CONFIG



I tried with this JSON, its not showing any extra buttons


To add the extra buttons use something like below in the advanced config setting 


header: {
  left: 'prev,next today',
  center: 'title',
  right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,listWeek,listDay'
},


and to change the button labels:


buttonText: {
  today: 'today',
  dayGridMonth: 'month',
  timeGridWeek: 'week',
  timeGridDay: 'day',
  listMonth: 'list month',
  listWeek: 'list week',
  listDay: 'list day'              
},


This will show something like:

I added this in Advanced config 

and i am getting this error so calendar is not loading

Hi,


I see 2 commas (,,)  in your advanced config and that is causing a runtime error. Please correct it to just 1 comma (,) and try again.

 Regards,

Peter Braat

Solution

sai p wrote:

I added this in Advanced config 

and i am getting this error so calendar is not loading

Remove comma where you finished defining buttonText as shown in your 1st pic.

buttonText: {
  today: 'today',
  dayGridMonth: 'month',
  timeGridWeek: 'week',
  timeGridDay: 'day',
  listMonth: 'list month',
  listWeek: 'list week',
  listDay: 'list day'              
}


Solution

Peter Braat wrote:

Hi,


I see 2 commas (,,)  in your advanced config and that is causing a runtime error. Please correct it to just 1 comma (,) and try again.

 Regards,

Peter Braat

That worked thanks every one