CODEWITHSUNDEEP
jqueryjquery-pluginsfullcalendar
I'll-Be-Back
I'll-Be-Back

Reputation: 10838

FullCalendar - all the months on 1 page?

I can't find a way to show all the months from Jan to Dec on a page using FullCalendar plugin. I wanted to look something like this: enter image description here

For each month I want to resize it to approx 250px

I tried this code and it doesn't resize the width to 250px:

$('#calendarJan').fullCalendar({
          editable: false,
          events: 'ajax-calender.php?month=jan',
          height: 50,
          eventAfterRender: function(event, element, view) {
                     $(element).css('width','250px');
               }
});

HTML

  <div style='background-color:white; padding:5px;'>
   <div id='calendarJan'></div>
   <div id='calendarFeb'></div>
   <div id='calendarMar'></div>
  </div>

Upvotes: 2

Views: 1676

Answers (3)

arshaw
arshaw

Reputation: 2725

This is now built-in with "Multi-Month View"

docs: https://fullcalendar.io/docs/multimonth-grid

demo: https://fullcalendar.io/docs/multimonth-grid-demo

Upvotes: 0

Jason
Jason

Reputation: 721

 new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    height: 650,
                    themeSystem: 'Sandstone',
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'multiMonthYear,dayGridMonth,timeGridWeek,dayGridDay,list'
                    },

For the new Updated version of [email protected]

right: 'multiMonthYear,dayGridMonth,timeGridWeek,dayGridDay,list'

This 'multiMonthYear' answers your question

Upvotes: 1

Utarehpson
Utarehpson

Reputation: 166

try setting the width of the div you're placing it in.. something like this:

document.getElementById('calendarJan').setAttribute("style", "width: 250px");

Upvotes: 1

Related Questions