CMS Made Simple Forums

We installed a new copy of CMSMS and purchased bandB_pro for our client.

We have been trying to install cgcalendar 2.5.1 for the past week

We need to use Full Calendar Display

It installed, and we can add Events through the back-end and the calendar does display there

HOWEVER, we cannot get the calendar to display on/in the front end of the site.

In the back end of the page itself we have:
<p>{cms_module module="CGCalendar" category="mydates"}</p>
<p>Calendar goes here</p>

The Template Types/Prototypes page for CGCalendar::fullCalendar View is:
{* orig fullcalendar view *}
{* This template utilizes fullcalendar (http://fullcalendar.io) an interactive javascript calendar *}
{* this action requires that:
a: jquery and jquery-ui be enabled in the page header. You can use jQueryTools, or {cms_jquery} for this.
b: {cgjs_render} be called in the page header, after the inclusion of jquery and jquery ui.
*}
{cgjs_require cssfile='lib/fullcalendar/fullcalendar.min.css'}
{cgjs_require jsfile='lib/fullcalendar/lib/moment.min.js'}
{cgjs_require jsfile='lib/fullcalendar/fullcalendar.js'}
{cgjs_add nominify=1}
{* module_action_url action=ajax_fetchevents forajax=1 assign='fetch_url' *}
{module_action_url action=ajax_fetchevents forajax=1 category=$actionparams.category|default:'' assign='fetch_url'}
{$actionid='cntnt01'}
function entity_decode(encoded) {
return $('<textarea/>').html(encoded).text();
}
$(document).ready(function(){
var _holidays = null;
var dateStrings = {$datestringsjson};
$.ajax({
url: '{module_action_url action=ajax_fetchholidays forajax=1}'
}).done(function(data){
if( typeof data != 'undefined' && data != null && data.length > 0 ) {
_holidays = data;
}

$('#fullcalendar').fullCalendar({
dayRender: function( date, cell ) {
// get holiday events for today.
if( typeof _holidays == 'string' ) return;
if( !_holidays || ! _holidays instanceof Array ) return;
var _tst1 = date.format('YYYY-MM-DD');
_holidays.forEach(function(entry){
if( _tst1 == entry.start ) {
cell.addClass('holiday');
cell.css('backgroundColor','{$holiday_bgcolor}').css('color','{$holiday_fgcolor}');
cell.html(entry.title);
}
});
},
events: {
url: '{$fetch_url}',
type: 'GET',
data: {
'{$actionid}showchildren': 1,
'{$actionid}detailpage': '{$detailpage}',
'{$actionid}eventtemplate': '{$actionparams.eventtemplate|default:''}',
'{$actionid}editpage': '{$actionparams.editpage|default:''}',
'{$actionid}editeventtemplate': '{$actionparams.editeventtemplate|default:''}',
},
error: function() {
alert('{$mod->Lang('error_fetching_events')|cms_escape}');
}
},
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultEventMinutes: 15,
slotMinutes: 15,
allDayText: '{$mod->Lang('allday')|cms_escape}',
eventColor: '{$dflt_bgcolor}',
eventTextColor: '{$dflt_fgcolor}',
monthNames: dateStrings.monthNames,
monthNamesShort: dateStrings.monthNamesShort,
dayNames: dateStrings.dayNames,
dayNamesShort: dateStrings.dayNamesShort,
firstDay: {$firstdayofweek},
views: {
month: { columnFormat: 'ddd' },
week: { columnFormat: 'ddd d/w' },
day: { columnFormat: 'dddd d/M' },
},
buttonText: {
today: entity_decode('{$text_today|cms_escape}'),
week: '{$text_week|cms_escape}',
month: '{$text_month|cms_escape}',
day: '{$text_day|cms_escape}'
},
eventClick: function(event, jsEvent, view) {
// woot, we can go to a detail view.
window.location = event.detail_url;
}
});

});
});
{/cgjs_add}

<div id="fullcalendar"></div>

What are we doing wrong?

Many thanks to whom ever can help --

It takes a bit of thought to get the scripts loaded and in the right place for fullcalendar, you need to follow the directions very specifically regarding cgjs_render etc. Also note that the BandB theme loads jQuery at the bottom of the page, so you'll either need to move the calendar scripts to after that, or comment it out and load jQuery in the header instead.