Support

September 10, 2020 at 12:39 pm

My espresso calendar is not showing up, when using the shortcode.
The calendar is apparently loading it’s jquery function inside the content div like this:

jQuery(document).ready(function($) {

var ee_total_images = 0;

$(‘#espresso_calendar’).fullCalendar({

/**
* General Display
* http://arshaw.com/fullcalendar/docs/text/
**/
//month, basicWeek, basicDay, agendaWeek, agendaDay
defaultView: ‘month’,

//Defines the buttons and title at the top of the calendar.
header: { //Settings: http://arshaw.com/fullcalendar/docs/display/header/
left: ‘prev, today’, center: ‘title’, right: ‘month,agendaWeek,agendaDay,next’ },

/**
* Theme Settings
*
* Once you enable theming with true, you still need to include the CSS file for the theme you want.
* For example, if you just downloaded a theme from the jQuery UI Themeroller, you need to put a tag in your page’s .
**/

//jQuery UI Themeroller
//Enables/disables use of jQuery UI theming.
//Settings: http://arshaw.com/fullcalendar/docs/display/theme/
theme: true,
//This option only applies to calendars that have jQuery UI theming enabled with the theme option.
/*buttonIcons:{ //Settings: http://arshaw.com/fullcalendar/docs/display/buttonIcons/
prev: ‘circle-triangle-w’,
next: ‘circle-triangle-e’
},*/

//The day that each week begins.
//The value must be a number that represents the day of the week.
//Sunday=0, Monday=1, Tuesday=2, etc.
firstDay:0, //Settings: http://arshaw.com/fullcalendar/docs/display/firstDay/

//Displays the calendar in right-to-left mode.
isRTL: false,

//Whether to include Saturday/Sunday columns in any of the calendar views.
weekends: 1,

//Determines the number of weeks displayed in a month view. Also determines each week’s height.
weekMode:’fixed’, //Settings: http://arshaw.com/fullcalendar/docs/display/weekMode/

//Will make the entire calendar (including header) a pixel height.
height:650, //Settings: http://arshaw.com/fullcalendar/docs/display/height/

//Will make the calendar’s content area a pixel height.
//contentHeight: 600, //Settings: http://arshaw.com/fullcalendar/docs/display/contentHeight/

//Determines the width-to-height aspect ratio of the calendar.
//aspectRatio: 2, //Settings: http://arshaw.com/fullcalendar/docs/display/aspectRatio/

/**
* Agenda Options
* http://arshaw.com/fullcalendar/docs/agenda/
* Note: These ptions that apply to the agendaWeek and agendaDay views, and have beft out intentionally.
* Please refer to the URL above to add.manage your agenda views.
**/

/**
* Text/Time Customization Settings
* http://arshaw.com/fullcalendar/docs/text/
**/

//Determines the time-text that will be displayed on each event.
timeFormat:{ //Settings: http://arshaw.com/fullcalendar/docs/text/timeFormat/
// for agendaWeek and agendaDay
agenda: ‘h:mm{ – h:mm}’, // 5:00 – 6:30

// for all other views
”: ”// 7p
},

//Changes the colors of the events as seen here:
//http://code.google.com/p/fullcalendar/issues/detail?id=6&can=1&q=css&colspec=ID%20Type%20Status%20Milestone%20Summary%20Stars
eventRender: function( event, element) {

// set an event category class
//alert(event.className);
if(event.className){
element.find(‘a’).addClass(event.className);
}
//This displays the title of the event when hovering
//element.attr(‘title’, event.title + ” – Event Times: ” + event.start + event.end);

// if the user selects show in thickbox we add this element
//if(event.in_thickbox_url){
//element.after($(‘

’));
//}

$(‘a.fc-event’).addClass(‘themeroller ui-state-focus’);
$(‘a.fc-event div’).removeClass(‘fc-event-skin’);
$(‘.fc-view’).addClass(‘ui-widget-content’);
$(‘.expired’).removeClass(‘ui-state-focus’).addClass(‘ui-state-default’);
var ee_month_day = event.month + ‘-‘ + event.day;
element.attr( ‘rel’, ee_month_day ).attr( ‘id’, ‘EVT_ID-‘+event.id );

if(event.event_img_thumb){
ee_total_images = parseInt( ee_total_images ) + 1;
element.addClass(‘event-has-thumb’);
element.find(‘.fc-event-title’).after($(‘’));
}

if( event.expired ) {
element.addClass(‘expired’);
}

if ( event.startTime != ” && event.startTime != undefined ) {
event.startTime = ‘’ + event.startTime + ‘’;

if ( event.startTime != false && event.endTime != ” && event.endTime != undefined ) {
event.endTime = ‘’ + event.endTime + ‘’;
} else {
event.endTime = ”;
}

if ( event.startTime ) {
element.find(‘.fc-event-title’).after($(‘

’ + event.startTime + ‘ – ‘ + event.endTime + ‘

’));
}
}

if ( event.display_reg_form == ‘Y’) {
event.regButtonText = ‘Register Now’;
} else {
event.regButtonText = ‘View Details’;
}

element.qtip({
content: {
text: event.description + ‘

’,
title: {
text: ‘Description’,
button: true,
}

},
position: {
/*at: ‘top right’,
adjust: {
x: 0, y: 30*/
my: ‘bottom center’, // Position my top left…
at: ‘top center’, // at the bottom right of…
},
show: {
event: ‘click mouseenter’,
solo: true
},
hide: “unfocus”,
style: {//Additional informatio: http://craigsworks.com/projects/qtip2/docs/style/
tip: {
corner: ‘bottom center’
},
classes: ‘ui-tooltip-rounded ui-tooltip-light ui-tooltip-shadow’, //Themeroller styles
/*
* The important part: style.widget property

* This tells qTip to apply the ui-widget classes to
* the main, titlebar and content elements of the qTip.
* Otherwise they won’t be applied and ThemeRoller styles
* won’t effect this particular tooltip.
*/
widget: true
}
});

//These are examples of custom parameters that can be passed
/*if (event.eventType == ‘meeting’) {
element.addClass(‘meeting’);
//alert(event.myType );
}*/

//This example basically applies different classes to the event
/*switch (event.myType){
case ‘meeting’ :
element.find(‘.n, .w, .c, .e, .s’).css(‘background-color’, ‘#00cc33’);
break;
case ‘project’ :
element.find(‘.n, .w, .c, .e, .s’).css(‘background-color’, ‘red’);
break;
default :
break;
}*/

},

//Determines the text that will be displayed on the calendar’s column headings.
columnFormat:{ //Settings: http://arshaw.com/fullcalendar/docs/text/columnFormat/
month: ‘ddd’, week: ‘ddd M/d’, day: ‘dddd M/d’ /*month: ‘ddd’,// Mon
week: ‘ddd M/d’, // Mon 9/7
day: ‘dddd M/d’// Monday 9/7*/
},

//For date formatting options, please refer to: http://arshaw.com/fullcalendar/docs/utilities/formatDate/
titleFormat:{ //Settings: http://arshaw.com/fullcalendar/docs/text/columnFormat/
month: ‘MMMM yyyy’, week: ‘MMM dS[ yyyy] – {[ MMM] dS yyyy}’, day: ‘dddd, MMM dS, yyyy’ /*month: ‘MMMM yyyy’, // September 2009
week: “MMM d[ yyyy]{ ‘—'[ MMM] d yyyy}”, // Sep 7 – 13 2009
day: ‘dddd, MMM d, yyyy’// Tuesday, Sep 8, 2009*/
},

//Text that will be displayed on buttons of the header.
buttonText: { //Settings: http://arshaw.com/fullcalendar/docs/text/buttonText/
prev: ‘ ◄ ‘,next: ‘ ► ‘,prevYear: ‘ « ‘,nextYear: ‘ » ‘,today:’today’,month:’month’,week: ‘week’,day:’day’ /*prev: ‘ ◄ ‘,// left triangle
next: ‘ ► ‘,// right triangle
prevYear: ‘ << ‘, // <> ‘, // >>
today:’today’,
month:’month’,
week: ‘week’,
day:’day’*/
},

//Full names of months.
monthNames: [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’/*’January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’*/],

//Abbreviated names of months.
monthNamesShort: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’/*’Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’*/],

//Full names of days-of-week.
dayNames: [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’/*’Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’*/],

//Abbreviated names of days-of-week.
dayNamesShort: [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’/*’Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’*/],

//Load the events into json srrsy
events: [{“color”:”#914896″,”textColor”:”#1f1e2a”,”url”:”http:\/\/www.usdsf.org\/?page_id=140&regevent_action=register&event_id=1″,”id”:”1″,”title”:”Event1″,”description”:”

events ill be display\n”,”display_reg_form”:”Y”,”start”:”2013-10-20T11:00:00+00:00″,”end”:”2013-10-21T18:00:00+00:00″,”day”:”21″,”month”:”10″,”expired”:”expired”,”today”:”2013-11-08″,”this_month”:”11″,”startTime”:”11:00 am”,”endTime”:”6:00 pm”,”event_img_thumb”:””,”className”:””,”eventType”:””,”allDay”:false},{“color”:”#914896″,”textColor”:”#1f1e2a”,”url”:”http:\/\/www.usdsf.org\/?page_id=140&regevent_action=register&event_id=2″,”id”:”2″,”title”:”event 1″,”description”:”

loremipsum doler ipmit.
\nloremipsum doler ipmit.\n”,”display_reg_form”:”Y”,”start”:”2013-11-14T08:00:00+00:00″,”end”:”2013-11-15T10:00:00+00:00″,”day”:”15″,”month”:”11″,”expired”:””,”today”:”2013-11-08″,”this_month”:”11″,”startTime”:”8:00 am”,”endTime”:”10:00 am”,”event_img_thumb”:””,”className”:””,”eventType”:””,”allDay”:false},{“color”:””,”textColor”:””,”url”:”http:\/\/www.usdsf.org\/?page_id=140&regevent_action=register&event_id=3″,”id”:”3″,”title”:”Event 2″,”description”:”

All events require registration start\/end dates and start\/end times in order to display properly on your pages.\n”,”display_reg_form”:”Y”,”start”:”2013-11-13T08:00:00+00:00″,”end”:”2013-11-13T10:00:00+00:00″,”day”:”13″,”month”:”11″,”expired”:””,”today”:”2013-11-08″,”this_month”:”11″,”startTime”:”8:00 am”,”endTime”:”10:00 am”,”event_img_thumb”:””,”className”:””,”eventType”:””,”allDay”:false},{“color”:””,”textColor”:””,”url”:”http:\/\/www.usdsf.org\/?page_id=140&regevent_action=register&event_id=4″,”id”:”4″,”title”:”Event 3″,”description”:”

All events require registration start\/end dates and start\/end times in order to display properly on your pages.\n”,”display_reg_form”:”Y”,”start”:”2013-11-23T08:00:00+00:00″,”end”:”2013-11-23T10:00:00+00:00″,”day”:”23″,”month”:”11″,”expired”:””,”today”:”2013-11-08″,”this_month”:”11″,”startTime”:”8:00 am”,”endTime”:”10:00 am”,”event_img_thumb”:””,”className”:””,”eventType”:””,”allDay”:false}],

viewDisplay: function(view) {
$(‘.ui-state-active’).each( function() {
$(this).removeClass(‘ui-state-active’);
});
$(‘.fc-today’).addClass(‘ui-state-active’).removeClass(‘ui-state-highlight’);
},

// if an event in the array has already happened, it is expired and we’ll give it an ‘expired’ class
loading: function(bool) {
if (bool) $(‘#loading’).show();
else $(‘#loading’).hide();
}

});

var ee_imgTimeout = ee_total_images * 50;

setTimeout(
function() {

// establish vars we need to resize calendar cells properly
var ee_day = 0;
var ee_month = 0;
var ee_thisMonth = 0;
var ee_thisYear = 0;
var ee_prevMonth = 0;
var ee_nextMonth = 0;
var ee_newTop = 0;

var ee_months = new Object();
var ee_monthNames = new Object();
ee_monthNames= [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’];
for ( i=0; i div’).attr( ‘id’, ee_setID );
});

$(‘.fc-event’).each( function(index){
// determine what month and day this event is on
ee_monthDay = $(this).attr( ‘rel’ );
//console.log( ‘monthDay: ‘ + monthDay );
// find day container in calendar
dayCnt = $(‘#md-‘+ee_monthDay);
dayCntHTML = dayCnt.html();

if ( dayCntHTML != null && dayCntHTML != undefined ) {
if ( dayCntHTML == ‘ ‘ ) {
dayCntHTML = ”;
dayCnt.html( dayCntHTML );
dayCnt.css({ ‘height’ : 0 });
}

// grab offset for dayCnt
dayCntPos = dayCnt.position();
//console.log( ‘dayCntPos.top = ‘ + dayCntPos.top + ‘\n’ + ‘dayCntPos.left = ‘ + dayCntPos.left );
dayCntHgt = dayCnt.css( ‘height’ );
if ( dayCntHgt == undefined ){
dayCntHgt = ‘0px’;
}
dayCntHgt = dayCntHgt.replace( ‘px’, ” );
dayCntHgt = parseInt( dayCntHgt );
ee_newTop = dayCntPos.top + dayCntHgt;
//console.log( ‘newTop = ‘ + newTop + ‘ = dayCntPos.top ( ‘ + dayCntPos.top + ‘ ) + dayCntHgt ( ‘ + dayCntHgt + ‘ )’ );
$(this).css({ ‘top’ : ee_newTop });
linkHeight = parseInt( $(this).find(‘.fc-event-inner’).outerHeight() );
//console.log( ‘linkHeight = ‘ + linkHeight );
ee_newHeight = dayCntHgt + linkHeight + 3;
dayCnt.height( ee_newHeight ).css({ ‘height’ : ee_newHeight + ‘px’ });
//console.log( ‘newHeight = ‘ + newHeight );
var ee_parentHeight = dayCnt.parents(‘tr’).outerHeight();
//console.log( ‘parentHeight = ‘ + parentHeight );
//dayCnt.parents(‘tr’).css({ ‘background’ : ‘pink’ });
if( ee_parentHeight < ee_newHeight ) {
ee_newHeight = ee_newHeight + 30;
dayCnt.parents(‘tr’).height( ee_newHeight ).css({ ‘height’ : ee_newHeight + ‘px’ });
}

}
});

},
ee_imgTimeout
);

});

Am I missing something obvious here? I have not touched any of the plugin files for events-calendar.
Thanks