CGCalendar: Background color Event days

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Locked
webform
Power Poster
Power Poster
Posts: 458
Joined: Sat Nov 25, 2006 3:39 pm
Location: Copenhagen, Denmark

CGCalendar: Background color Event days

Post by webform »

I'm trying to figure out how to set a background color in CGCalendar for days with an event based on which category the event belongs to.

I want to show visitors which days is booked, reserved or free to book with color coded days in fullcalendar view.

So far i've found some descriptions on setting the background color on days with events (Fullcalendar dayRender or eventRender settings), but that is for all events with no regards for category.

Anyone has any suggestion how to achieve this with CGCalendar?

Code: Select all

CMSMS 2.2.5
CGCalendar 2.5
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: CGCalendar: Background color Event days

Post by calguy1000 »

Things to note:

a: CGCalendar allows multiple events on a particular day.
b: Events can be in 0 or more different categories

So... depending on how you're limiting the use of CGCalendar, assuming you will never have more than 1 category... you will want to look at the eventAfterAllRender() method.

Note: there is lots of help wrt. tweaking FullCalendar on the internet.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
webform
Power Poster
Power Poster
Posts: 458
Joined: Sat Nov 25, 2006 3:39 pm
Location: Copenhagen, Denmark

Re: CGCalendar: Background color Event days

Post by webform »

Thanks!

The calendar is for renting a house, so there is only one event and one category on a given day - Either an event is "Booked or "Reserved".

As category goes the calendar only fetch events in categories "Booked" and "Reserved".

With eventRender i've succeed to set a class but not to set a class depending on the events category.

My eventRender (found on the internet):

Code: Select all

eventRender: function (event, element) {
    var start = moment(event.start);
    var end = moment(event.end);
    while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){
        var dataToFind = start.format('YYYY-MM-DD');
        $("td[data-date='"+dataToFind+"']").addClass('dayWithEvent');
        start.add(1, 'd');
    }
}
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

Re: CGCalendar: Background color Event days

Post by calguy1000 »

There is no category given to the FullCalendar event object in CGCalendar v2.5 There are fgcolor and bgcolor attributes though.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
webform
Power Poster
Power Poster
Posts: 458
Joined: Sat Nov 25, 2006 3:39 pm
Location: Copenhagen, Denmark

Re: CGCalendar: Background color Event days

Post by webform »

I've found a solution - Maybe not the most pretty one, but it seems to do the job.

I've created an Event Object template using a "CGCalendar::Event List View" template and named it "fetch_bookings":

Code: Select all

[
{foreach from=$events key=key item=event name=list}{strip}
{literal}{{/literal}
{/strip}title: '{$event.event_title}',
{if $event.fgcolor != '' && $event.bgcolor != ''}
color:'{$event.bgcolor}',
textColor:'{$event.fgcolor}',
{/if}
allDay:{if $event.event_all_day == 1}true{else}false{/if},
start: '{$event.event_date_start}',
{if $event.event_date_end != 0}end: '{$event.event_date_end}',{/if}
category: '{$event.category_names}',
className: ["hide"]
{literal}}{/literal}{if $smarty.foreach.list.last}{else},{/if}
{/foreach}
]
In the template i've set event category as an Event Object as FullCalendar allows Non-standard Fields in the callback. https://fullcalendar.io/docs/event_data/Event_Object/

Then in my "CGCalendar::fullCalendar View" template i replace {$fetch_url} with a module call to my "CGCalendar::Event List View" template i named "fetch_bookings" like this:

Code: Select all

events: {cms_module module='CGCalendar' display='upcominglist' listtemplate='fetch_bookings' category='Booket,Reseveret'},
and add in an eventRender callback function setting a class depending on event category:

Code: Select all

eventRender: function (event, element) {
    var start = moment(event.start);
    var end = moment(event.end);
    while( start.format('YYYY-MM-DD') != end.format('YYYY-MM-DD') ){
        var dataToFind = start.format('YYYY-MM-DD');
        $("td[data-date='"+dataToFind+"']").addClass(event.category);
        start.add(1, 'd');
    }
},
It seems to do the trick and i can now use CSS to style my days with events.

Any who has more clean suggestions to a solution is welcome to share.
Locked

Return to “Modules/Add-Ons”