Search code examples
javascriptjqueryfullcalendarfullcalendar-schedulerfullcalendar-3

Display Plus icon on day render in full calendar


My default view is month view in full calendar I am displaying a plus icon on each day on day-render event,but plus icon is visible to all dates with upcoming dates

I want to display plus icon only on enable dates or upcoming dates not on past dates,Please help me to do this.

Below is my calendar script

<script type="text/javascript">
    $(document).ready(function() {   
         /* initialize the calendar
         -----------------------------------------------------------------*/
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayRender: function (date,cell) {
              cell.prepend('<i class="fa fa-plus" aria-hidden="true"></i>');
            },
            selectable: true,
            selectHelper: true, 
            editable: true,            
            eventLimit: true, // allow "more" link when too many events
            events: [
            <?php if(!empty($calendar)){ foreach ($calendar as $schdate){ 
                $dte =  date('Y-m-d', strtotime($schdate['schedule_date'])); ?>
                {
                    title: '<?php echo $schdate['schedule_title']; ?>',
                    start: '<?php echo $dte; ?>'

                },
            <?php } } ?>            

            ]
        });
    });
</script>

Solution

  • Try this...
    This getDates() function is used for retrieve current date

    function getDates()
    {
        var date = new Date();
            var cellYear = date.getFullYear();
            var cellMonth = (date.getMonth() + 1 <10)?'0'+(date.getMonth() + 1) : (date.getMonth() + 1);
            var cellDay = (date.getDate()<10)?'0'+(date.getDate()):(date.getDate());
            var newDate = cellYear+"-"+cellMonth+"-"+cellDay;   
            return newDate;
    }
    
    dayRender: function (date, cell) {
                var cellYear = date.year();
                var cellMonth = (date.month() + 1 <10)?'0'+(date.month() + 1) : (date.month() + 1);
                var cellDay = (date.date()<10)?'0'+(date.date()):(date.date());
                var newDate = cellYear+"-"+cellMonth+"-"+cellDay;
    
                if(newDate >= getDates()){                  
                    cell.append('<i class="fa fa-plus" aria-hidden="true"></i>');                   
                }       
            },