Change FullCalendar in the mobile version

Question

I want to customize it to my needs in order to populate the calendar with events and change its monthly view to something like a Calendar on the iPhone (large cells that are colored when they have events).

If I change the .fc-day-number css class, I will probably make the number of days longer. The real deal for me is understanding the script so that I can remove the event bars and add them as background colors for the day cells. (Controlled by the event color option)

If a day is clicked, it will create a list of events on the calendar to click and edit them or add new events and many other things that interact with the database.

If someone is interested, I would be glad if he / she would receive a helping hand; -)

EDIT:

I wrote that I wanted to add events as a background color in days. So I tried to understand the code from arshaw and how it adds an event to the month view of the calendar.

On line 4590 in the daySegHTML(segs) function, it writes the div / html event data, but without height, only the width and horizontal position.

He does this on line 4842 in the daySegSetTops(segs, rowTops) , where seg.top is the top in the day cell, rowTops[seg.row] is the top in the calendar div, and seg.row is the weekly (0-5).

From seg.start.getDay() to daySegHTML() you get the day cell in the weekly row. I used this to get the class name in the tr element to add an event.

Answer 1

Take a look at this. This is a mobile optimized version! https://github.com/JordanReiter/fullcalendar-mobile

Answer 2

I think you can use Views and windowsResize to achieve this in the latest version of the full calendar (4.3.1):

 document.addEventListener('DOMContentLoaded', function() { var calendarTest = document.getElementById('calendar') /* Create function to initialize the correct view */ function mobileCheck() { if (window.innerWidth >= 768 ) { return false; } else { return true; } }; /* Start Full Calendar */ var calendar = new FullCalendar.Calendar(calendarTest, { plugins: [ 'dayGrid' ], /* Create new view */ views: { newView: { /* Your responsive view */ type: 'dayGridWeek', duration: { days: 5 }, } }, /* Choose view when initialize */ defaultView: mobileCheck() ? "newView" : "dayGridWeek", /* Check if window resize and add the new view */ windowResize: function(view) { if (window.innerWidth >= 768 ) { calendar.changeView('dayGridWeek'); /* More code */ } else { calendar.changeView('responsiveView'); /* More code */ } }, editable: true, }); calendar.render(); }); });