Support

Home Forums Translations Calendar not showing – Loaded JS in content

Calendar not showing – Loaded JS in content

Posted: November 8, 2013 at 2:14 am


sumana cn

November 8, 2013 at 2:14 am

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:
<script type=”text/javascript”>

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 <link> tag in your page’s <head>.
**/

//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($(‘<div style=”display: none;”><div id=”event-thumb-detail-‘ + event.id+ ‘”><h2 class=”tb-event-title”>’ + event.title + ‘</h2><p class=”tb-event-start”>Event start: ‘ + event.start + ‘</p><p class=”tb-event-end”>Event End: ‘ + event.end + ‘</p>’ + event.description + ‘<p class=”tb-reg-link”>< a >Register for this event</p></div></div>’));
//}

$(‘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($(‘<span class=”thumb-wrap”></span>’));
}

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

if ( event.startTime != ” && event.startTime != undefined ) {
event.startTime = ‘<span class=”event-start-time”>’ + event.startTime + ‘</span>’;

if ( event.startTime != false && event.endTime != ” && event.endTime != undefined ) {
event.endTime = ‘<span class=”event-end-time”>’ + event.endTime + ‘</span>’;
} else {
event.endTime = ”;
}

if ( event.startTime ) {
element.find(‘.fc-event-title’).after($(‘<p class=”time-display-block”>’ + event.startTime + ‘ – ‘ + event.endTime + ‘</p>’));
}
}

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

element.qtip({
content: {
text: event.description + ‘<div class=”qtip_info”>’ + ‘< a href="' + event.url + '">‘ + event.regButtonText + ‘‘ +(event.startTime != ” ? ‘<span class=”time_cal_qtip”>’ + event.startTime + ‘ – ‘ + event.endTime + ‘</span>’ : ”) + ‘</div>’,
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: ‘ << ‘, // <<
nextYear: ‘ >> ‘, // >>
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”:”<p>events ill be display<\/p>\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”:”<p>loremipsum doler ipmit.<br \/>\nloremipsum doler ipmit.<\/p>\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”:”<p>All events require registration start\/end dates and start\/end times in order to display properly on your pages.<\/p>\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”:”<p>All events require registration start\/end dates and start\/end times in order to display properly on your pages.<\/p>\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<12; i++ ) {
ee_months[ ee_monthNames[i] ] = i+1;
}

var ee_monthYear = $(‘.fc-header-title h2’).html();
var ee_monthYearArray = ee_monthYear.split(‘ ‘);
ee_thisMonth = ee_months[ ee_monthYearArray[0] ];
ee_thisYear = ee_monthYearArray[1];
ee_prevMonth = ee_thisMonth – 1;
ee_nextMonth = ee_thisMonth +1;
// console.log( ‘prevMonth = ‘ + prevMonth + ‘\n’ + ‘nextMonth = ‘ + nextMonth );

$(‘.fc-view-month .fc-widget-content’).each(function(index) {
setMonth = ee_thisMonth;
if ( $(this).closest(‘tr’).hasClass(‘fc-first’) && $(this).hasClass(‘fc-other-month’) ){
setMonth = ee_prevMonth;
} else if ( $(this).hasClass(‘fc-other-month’) ){
setMonth = ee_nextMonth;
}
ee_setDay =$(this).find(‘.fc-day-number’).html();
ee_setID = ‘md-‘ + setMonth + ‘-‘ + ee_setDay;
//console.log( ‘setID = ‘ + setID );
$(this).find(‘.fc-day-content > 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
);

});

</script>

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

  • This topic was modified 7 years, 2 months ago by  sumana cn.
  • This topic was modified 10 months, 3 weeks ago by  Seth Shoultes. Reason: Removed broken link


Tony

  • Support Staff

November 8, 2013 at 3:27 am

Hi Sumana,

The JavaScript loading in the content area is expected behavior.

Regarding the Calendar not being displayed, this is generally caused by a JavaScript error, often from the sites theme either not including jQuery correctly, or not using it correctly.

If you look in Chrom Dev tools, under Console, do you see any JavaScript errors?


sumana cn

November 8, 2013 at 3:58 am

Thank you so much.
There was a javascript problem in my site.
Thanks for your response.

The support post ‘Calendar not showing – Loaded JS in content’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Status: closed

Updated by  sumana cn 7 years, 2 months ago ago

Topic Tags

Notifications

This topic is: resolved
Do NOT follow this link or you will be banned from the site!