|
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®event_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®event_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®event_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®event_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 11 years ago by
 sumana cn.
-
This topic was modified 4 years, 8 months ago by
 Seth Shoultes. Reason: Removed broken link
|
