event year view in fullcalendar v4

Question

I would like to display year view of events in fullcalendar v4. Year view has been added to full calendar until version 2.2.7. Later version does not have this. So, I decided to create year view using custom view . But I did not get where should I add the html part that display year view in the way we want. This is how I create a view. But listYear plugin able to display all events in the year in list form. I would like to display events in calendar display all month on one view. Is it possible to add our own html table to render in calendar?

views: {
                    Year: {
                           type      : 'listYear',
                           duration  : { 
                                        months: 12
                                       },
                           start     :year+'-01-01',
                           end       :(year+1)+'-01-01',                            
                           buttonText:'year'
                            }
                }

  document.addEventListener('DOMContentLoaded', function() {

                    var year    =<?php echo $year;?>;
                var event   ='<?php echo json_encode($events);?>';
                event=JSON.parse(event);
                //console.log(event);
                //create event Array
                events_array=[];
                for(i=0;i<event.length;i++)
                {
                    //parameter for event Array-https://fullcalendar.io/docs/event-object
                    start_array=event[i]['start'].split(" ");
                    end_array=event[i]['end'].split(" ");

                    if(start_array[1]==='00:00:00')
                    {
                        start   =start_array[0];
                    }
                    else
                    {
                        start   =event[i]['start'];
                    }
                    if(end_array[1]==='00:00:00')
                    {
                        end     =end_array[0];
                    }
                    else
                    {
                        end     =event[i]['end'];
                    }
                    object_data={
                                         id     :event[i]['id'],
                                         title  :event[i]['remark']+'-'+event[i]['title'],
                                         start  :start,
                                         end    :end,
                                         color  :event[i]['color'],                                      
                                    }
                events_array.push(object_data);                     
                }



    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: ['dayGrid','list'],
      header:
                        {
                            left    : 'prev,next today',
                            center  : 'title',
                            //version 2.2.7 able  to show year view.Year view has been implemented until version 2.2.7. 
                            //But , we are using 4 to use valid range (limiting the duration).Valid range available from 3.3.0
                            right   : 'Year,dayGridMonth,dayGridWeek,dayGridDay,listMonth'
                        },
            views: {
                        Year: {
                         /* type: 'timelineYear',*/
                          type: 'listYear',
                          duration: { months: 12
                                        /*weeks:1*/ },
                            start:year+'-01-01',
                            end: (year+1)+'-01-01',
                            /*intervalStart: $.fullCalendar.moment(year+'-01-01'),
                            intervalEnd: $.fullCalendar.moment((year+1)+'-01-01'),*/

                          buttonText: 'year'
                                }
                    },          
            defaultDate: year+'-01-01',
                        //set the year range limit - fullcalendar.min.js v3.3.0 & above support this
                        validRange: {
                                        start   : year+'-01-01',
                                        end     : (year+1)+'-01-01'
                                    },
                        defaultView : 'dayGridMonth',
                        editable    : false,//disable drag
                        events      : events_array,


                        //from [https://stackoverflow.com/questions/45698134/dayrender-not-properly-working-in-fullcalendar-on-given-dates]
                         dayRender: function (date, cell) 
                         {
                            var disabledDates = ["2016-02-10", "2016-02-15"];
                            //$.inArray returns the index of the element in the array, not a boolean indicating if the item exists in the array. If the element was not found, -1 will be returned.
                            /*if ($.inArray(date.format("YYYY-MM-DD"), disabledDates) > -1) 
                            {
                                cell.css("background-color", "green");
                            }
                            */
                        }

    });

    calendar.render();
  });

Thanks in advance

Answer 1

My aim is to use version 3 and above since it support the valid range function and version 3 custom view is quite understandable. So, I had use version 3 to do year view. This year view limited for only one year that consist of 12 months. Declare custom view in fullcalendar instantiation.

views: { CustomView: { type: 'custom', } }

Declare a button year in header for custom year view . Then in customButtons:, define what happen when user click this button.

customButtons: { year: { text:'year', click: function() { $('#calendar').fullCalendar('changeView', 'CustomView'); } } }

Then, get reference(FC) to fullcalendar's root namespace and class(View) that all views inherit from.

var FC =$.fullCalendar; var View =FC.View;

Build the view inside render: function() of our class CustomView. Create table containing 12 field (3 columns and 4 rows) and append to fc-view. Then ,arrange each event in object with required informations and add to events_array.events_array contain objects of events. Get next 12 months start from which period month start in array months. Then, loop in months array and instantiate fullcalendar view in each field in that table created by using the id. Id is value from months(ex:'january_2019'). Set the duration one month and pass in the events array. So, each field show the view for one month together with the events. 12 fields shows view for 12 months.

CustomView = View.extend( { render: function() { }}

Register our class with the view system.

FC.views.custom = CustomView;

<?php
require_once('bdd.php');
// information from sql
// $event_2 is events array 
// $event_3 are array of earliest event start and latest event end date, chosen period start and end date,
?>
 <html>
  <head>
   <style>
         #container 
         {
            width: 100%;
            position: relative;
         }
        #calendar
        {
             width: 900px; /*can be in percentage also.*/
            height: auto;
            margin: 0 auto;
            padding: 10px;
            position: relative;
        }
        td.fc-sun 
        {
            background-color: #535450 !important;
        }
    </style>
    <script src="js/jquery.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src='js/moment.min.js'></script>
     <script src='v_3/fullcalendar.min.js'></script>    
    <link rel="stylesheet" href="v_3/fullcalendar.min.css" />
    <script>
        $(document).ready(function()
        {

            var event       ='<?php echo json_encode($events_2);?>';
            event           =JSON.parse(event);
            limit           ='<?php echo json_encode($events_3);?>';
            limit           =JSON.parse(limit);
            events_array=[];
                for(i=0;i<event.length;i++)
                {
                    //parameter for event Array-https://fullcalendar.io/docs/event-object
                    start_array=event[i]['start'].split(" ");
                    end_array=event[i]['end'].split(" ");

                    if(start_array[1]==='00:00:00')
                    {
                        start   =start_array[0];
                    }
                    else
                    {
                        start   =event[i]['start'];
                    }
                    if(end_array[1]==='00:00:00')
                    {
                        end     =end_array[0];
                    }
                    else
                    {
                        end     =event[i]['end'];
                    }
                    console.log(start+'=>'+end);
                    object_data=
                    {
                        id      :event[i]['id'],
                        title   :event[i]['remark']+'-'+event[i]['title'],
                        start   :start,
                        end :end,
                        color   :event[i]['color'],
                    }
                    events_array.push(object_data);
                }

                $('#calendar').fullCalendar
                ({
                    defaultDate: limit[0]['earliest'],
                    validRange: {
                                        start   : limit[0]['earliest'],
                                        end     : limit[0]['final']
                                    },
                    header      :
                                {
                                    left    :'prev,next,today',
                                    center  :'title',
                                    right   :'year,agendaWeek,month'
                                },

                    events      : events_array,
                    customButtons:
                    {
                        year:
                        {
                            text:'year',
                             click: function() 
                             {
                                $('#calendar').fullCalendar('changeView', 'CustomView');
                              }
                        }
                    },
                    views:
                    {
                        CustomView:
                        {
                            type: 'custom',
                        }
                    }
                })



            var view = $('#calendar').fullCalendar('getView');

            //custom view:
            var FC      = $.fullCalendar; //a reference to FullCalendar's root namespace
            var View    =FC.View;  //the class that all views must inherit from
            var CustomView;          //our subclass
            start_year  =limit[0]['earliest'].split("-")[0];
            end_year    =limit[0]['final'].split("-")[0];
            start_month =parseInt(limit[0]['fye_start'].split("-")[1]);

            CustomView = View.extend(
                {
                    render: function()
                    {
                        $('.fc-prev-button').addClass('fc-state-disabled');
                        $('.fc-next-button').addClass('fc-state-disabled');

                        //change the title
                        document.getElementsByClassName("fc-center")[0].getElementsByTagName('h2')[0].innerHTML = start_year;

                        //https://stackoverflow.com/questions/10832179/result-of-getting-next-12-months-in-javascript-is-messed-up
                        var months  =getNext12MonthNamesWithYear(limit[0]['fye_start']);
                        var table   ='<table align="center" style="width:100%">';
                        var m=0;
                        for(i=1;i<=4;i++)
                        {
                            table+='<tr>';
                            for(j=1;j<=3;j++)
                            {
                                table+='<td height="100"><div id="'+months[m]+'"></div></td>';
                                m++;
                            }
                            table+='</tr>';
                        }
                        table+='</table>';
                        $('.fc-view').append(table);
                        for(n=0;n<months.length;n++)
                        {
                            year =months[n].split("_")[1];
                            month=months[n].split("_")[0];
                            //https://stackoverflow.com/questions/13566552/easiest-way-to-convert-month-name-to-month-number-in-js-jan-01/27805696
                            month=getMonthFromString(month);//convert month string to month no

                            //month compulsory to have 2 digit
                            if(month>=10)
                            {
                                c=month;
                            }
                            else
                            {
                                c='0'+month;
                            }

                            $('#'+months[n]).fullCalendar
                            (
                                {
                                    header:
                                    {
                                        left:   '',
                                        center: 'title',
                                        right:  ''
                                    },
                                    events      : events_array,
                                    defaultDate : year+'-'+(c)+'-01',
                                    //set the year range limit - fullcalendar.min.js v3.3.1 & above support this
                                    defaultView:'month',
                                    duration:
                                    {
                                        months: 1
                                    }
                                })
                        }
                    },
                }
            )
            FC.views.custom = CustomView; // register our class with the view system*/
            })

function getNext12MonthNamesWithYear(date)
{
    var now = new Date(date);
    var month = now.getMonth();
    var year = now.getFullYear();

    var names = ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December'];

    var res = [];
    for (var i = 0; i < 12; ++i)
    {
        res.push(names[month] + '_' + year);
        if (++month === 12)
        {
            month = 0;
            ++year;
        }
    }
    return res;
}
function getMonthFromString(mon)
{
    return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}
    </script>   
</head>
<body>
     <div id='calendar'></div>
</body>

Looking forward for better solution.