Page 1 of 1
CGCalendar: Background color Event days
Posted: Sat Feb 17, 2018 5:27 pm
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?
Re: CGCalendar: Background color Event days
Posted: Sat Feb 17, 2018 6:04 pm
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.
Re: CGCalendar: Background color Event days
Posted: Sat Feb 17, 2018 6:20 pm
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');
}
}
Re: CGCalendar: Background color Event days
Posted: Sat Feb 17, 2018 9:08 pm
by calguy1000
There is no category given to the FullCalendar event object in CGCalendar v2.5 There are fgcolor and bgcolor attributes though.
Re: CGCalendar: Background color Event days
Posted: Sat Feb 17, 2018 11:14 pm
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.