Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change color of past events in Fullcalendar

Tags:

fullcalendar

I'm trying to implement this solution to "grey out" past events in Fullcalendar, but I'm not having any luck. I'm not too well versed in Javascript, though, so I assume I'm making some dumb mistakes.

I've been putting the suggested code into fullcalendar.js, inside the call for daySegHTML(segs) around line 4587.

I added the first two lines at the end of the function's initial var list (Why not, I figured)—so something like this:

...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;

var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix

var html = '';
...

Then, just below, I added the other two lines inside the loop:

for (i=0; i<segCnt; i++) {
    seg = segs[i];
    event = seg.event;
    classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
    if (isEventDraggable(event)) {
        classes.push('fc-event-draggable');
    }

    unixevent = parseInt((event.end.getTime()) / 1000); //event date in Unix
    if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old

    if (rtl) {
        if (seg.isStart) {
            classes.push('fc-corner-right');
        }
...

Running this code results in a rendered calendar with no events displayed and an error message: Uncaught TypeError: Cannot call method 'getTime' of null

The "null" being referred to is, apparently, event.end.getTime(). But I'm not sure I understand what exactly is going wrong, or how things are being executed. As written, it seems like it should work. At this point in the code, from what I can tell, event.end contains a valid IETF timecode, but for some reason it's "not there" when I try to run it through getTime()?

This isn't a mission-critical tweak for me, but would still be nice—and I'd like to understand what's going on and what I'm doing wrong, as well! Any help greatly appreciated!

like image 552
Jeff Avatar asked Sep 28 '12 01:09

Jeff


People also ask

How do I change the color of events in FullCalendar?

You can change the color of all events on the calendar like so: var calendar = new Calendar(calendarEl, { events: [ // my event data ], eventColor: '#378006' }); You can use any of the CSS color formats such #f00 , #ff0000 , rgb(255,0,0) , or red .

How do I change my FullCalendar theme?

It is possible to change the look of the calendar (colors, fonts, etc) by applying a theme. Renders the calendar with a given theme system. In order to correctly theme your calendar with a Bootstrap 5 theme, you must include the correct stylesheets, include the JavaScript plugin, and set themeSystem to 'bootstrap5'.

How do I set events in FullCalendar?

Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });

How do I change the view in FullCalendar?

If you are using Custom View, you can change the visibleRange in the same way: calendar. changeView('timeGrid', { start: '2017-06-01', end: '2017-06-05' }); This date/visibleRange parameter was added in version 3.3.


2 Answers

If you are using FullCalendar2 with Google Calendar, you will need to use the version of the code below. This uses Moment.js to do some conversions, but since FC2 requires it, you'll be using it already.

        eventRender: function(event, element, view) {                   
            var ntoday = new Date().getTime();
            var eventEnd = moment( event.end ).valueOf();
            var eventStart = moment( event.start ).valueOf();
            if (!event.end){
                if (eventStart < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            } else {
                if (eventEnd < ntoday){
                    element.addClass("past-event");
                    element.children().addClass("past-event");
                }
            }
        }
like image 91
jaredatch Avatar answered Sep 21 '22 10:09

jaredatch


As per FullCalendar v1.6.4

Style past events in css:

.fc-past{background-color:red;}

Style future events in css:

.fc-future{background-color:red;}
like image 40
mijopabe Avatar answered Sep 19 '22 10:09

mijopabe