Fullcalendar Qtips Date Format

180 Views Asked by At

I'm trying to get the event.end time to display correctly in pop-up qtip2 tooltips using the following code:

            element.qtip({
            content: {    
                title: { text: event.title },
                text: '<span class="qtip-title">Starts: </span>' + ($.fullCalendar.formatDate(event.start, 'h:mm a')) + '<br>' + '<span class="qtip-title">Ends: </span>' + event.end + '<br>' + '<span class="qtip-title">Venue: </span>' + event.location + '<br>' + '<span class="qtip-title">Description: </span>' + event.description
            },
            ...

The event start time displays correctly using the code:

($.fullCalendar.formatDate(event.start, 'h:mm a'))

and the event end time displays as a string of numbers (ISO8601 string ?) using the code:

event.end

If I try replacing with either:

($.fullCalendar.formatDate(event.end, 'h:mm a'))

or:

event.end.format('h:mm a ddd') 

The calendar completely fails to display. Note: The code: event.start.format('h:mm a ddd') also displays the start time correctly.

Clearly I'm doing something wrong. Any advice would be greatly appreciated.

Further Update re: Console Log

Using the following code:

content: {    
                title: { text: event.title },
                text: '<span class="qtip-title">Starts: </span>' + event.start.format('h:mm a') + '<br>' + '<span class="qtip-title">Ends: </span>' + event.end.format('h:mm a') + '<br>' + '<span class="qtip-title">Venue: </span>' + event.location + '<br>' + '<span class="qtip-title">Description: </span>' + event.description
            },
...

the following console log data is returned:

unreachable code after return statement[Learn More]  js:69:1217
jQuery.Deferred exception: event.end is null eventRender@http://example.com/site/templates/scripts/hnu-calendar.js:80:66
H</t.prototype.publiclyTrigger@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:10:2065
p</e.prototype.publiclyTrigger@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:25413
o</t.prototype.filterEventRenderEl@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:29788
o</t.prototype.renderFgSegEls/<@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:29235
each@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:2813
each@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:1001
o</t.prototype.renderFgSegEls@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:29187
o</t.prototype.renderFgRanges@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:27940
o</t.prototype.render@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:27699
p</e.prototype.executeEventRender@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:26656
p</e.prototype.callChildren/<@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:31088
p</e.prototype.iterChildren@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:31182
p</e.prototype.callChildren@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:31058
p</e.prototype.executeEventRender@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:26729
p</e.prototype.requestEventsRender/<@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:18403
o</e.prototype.runTask@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:23735
r</t.prototype.runRemaining@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:22352
r</t.prototype.tryStart@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:22182
r</t.prototype.resume@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:9:21984
p</e.prototype.stopBatchRender@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:7:15515
e@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:6:16679
dispatch@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:10263
add/q.handle@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:3:8325
trigger@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:4:5806
triggerHandler@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:4:6394
s</e.prototype.trigger@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:6:16925
a</e.prototype.setProps@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:8:4635
a</e.prototype.set@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:8:4028
a</e.prototype.watch/this._watchers[t]</<@http://example.com/scripts-mx/fullcalendar.3.9.0.min.js:8:4864
j@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/</k<@https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
undefined  jquery.min.js:2:31515

Followed subsequently by this output:

BackgroundThumbnails remote process crashed - recovering  BackgroundPageThumbs.jsm:256
Error: page-thumbnail:error  BackgroundPageThumbs.jsm:116:24
TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363
TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363
TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363
BackgroundThumbnails remote process crashed - recovering  BackgroundPageThumbs.jsm:256

Error: page-thumbnail:error BackgroundPageThumbs.jsm:116:24 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 BackgroundThumbnails remote process crashed - recovering BackgroundPageThumbs.jsm:256 Error: page-thumbnail:error BackgroundPageThumbs.jsm:116:24 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 BackgroundThumbnails remote process crashed - recovering BackgroundPageThumbs.jsm:256 Error: page-thumbnail:error BackgroundPageThumbs.jsm:116:24 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 BackgroundThumbnails remote process crashed - recovering BackgroundPageThumbs.jsm:256 Error: page-thumbnail:error BackgroundPageThumbs.jsm:116:24 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 TelemetryStopwatch: requesting elapsed time for nonexisting stopwatch. Histogram: "PLACES_AUTOCOMPLETE_1ST_RESULT_TIME_MS", key: "null" TelemetryStopwatch.jsm:363 BackgroundThumbnails remote process crashed - recovering BackgroundPageThumbs.jsm:256 Error: page-thumbnail:error BackgroundPageThumbs.jsm:116:24 BackgroundThumbnails remote process crashed - recovering BackgroundPageThumbs.jsm:256 Error: page-thumbnail:error BackgroundPageThumbs.jsm:116:24 An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing container.html:8 An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing container.html:8 An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing container.html:8 a: timer startedsca.17.4.72.js:32 a: 0.84mssca.17.4.72.js:32 WebRTC interfaces with the “moz” prefix (mozRTCPeerConnection, mozRTCSessionDescription, mozRTCIceCandidate) have been deprecated. sca.17.4.72.js:33:4653 This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features! edit

The first line refers to https://www.googletagmanager.com/gtag/js?id=.... The first part of the second line ... hnu-calendar.js:80:66 Line 66 of that file refers to the second line of the following code:

        bootstrapFontAwesome: {
        close: 'fa-times',
        prev: 'fa-angle-left',
        next: 'fa-angle-right',
        prevYear: 'fa-angle-double-left',
        nextYear: 'fa-angle-double-right'
    },

The net result is a blank calendar and if I simply remove the following from the content section:

'<span class="qtip-title">Ends: </span>' + event.end.format('h:mm a') + '<br>' + 

The calendar diplays fine albeit the ends time is missing from the pop-up qtip tooltips.

0

There are 0 best solutions below