Modify FullCalendar into a Mobile Version

Question

I want to tweak it to my needs to fill the calendar with events and have its monthview modified into something like the Calendar on an IPhone (big cells that are colored when they have events).

If I modify the .fc-day-number css-class, I'll probably make the day numbers bigger. The real deal for me is to understand the script so that I can remove the event-bars and add them as background colors of the day-cells. (Controled over the color option of the event)

If a day is clicked it will create a list of events under the calendar to click onto and edit them or add new events and a bunch of other things which are interacting with the database.

If someone is interested I would be happy if he/she gets me a helping hand ;-)

EDIT:

I wrote that I wanted to add the events as background color to the days. So I tried to understand the code from arshaw and how he adds the event to the month view of the calender.

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

He does that in row 4842 in the function daySegSetTops(segs, rowTops) where seg.top is the top in the daycell, rowTops[seg.row] is the top in the calender div and seg.row is the weekrow (0 to 5).

With seg.start.getDay() by daySegHTML() you get the day cell in a week row. I used that to get the classname in the tr element to add the event.

Solution 1

Take a look at this. It is a version that is optimized for mobile devices! https://github.com/JordanReiter/fullcalendar-mobile

Solution 2

I think that you can use Views and windowsResize to achieve this in the last version of 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();
    });
});