CODEWITHSUNDEEP
javascriptfullcalendar
Pixcelleen88
Pixcelleen88

Reputation: 109

Format time 24 hours to 12 hours with AM/PM and display inside popover fullCalendar

I want to format the time from 24 hours to 12 hours with AM/PM and display it in popover. This is my code:

        eventMouseover: function (event, jsEvent) {
                var t1 = event.start;
                var t2 = event.end;

        $(this).popover({
            html:true,
            placement: 'left',
            trigger: 'hover',
            content: t1 + ' - ' + t2,
            container: '#calendar'
        }).popover('toggle');
        }

I search for the answers here but it doesnt work in popover. So i decided to ask for it. This is the code i used. It works on here, but not in popover.

       eventRender: function(event, element) {
            var t1 = event.time;
            var t2 = event.time2;
            var tmpArr = t1.split(':'), time12;
                if(+tmpArr[0] == 12) {
                    time12 = tmpArr[0] + ':' + tmpArr[1] + 'P';
                } else {
                if(+tmpArr[0] == 00) {
                    time12 = '12:' + tmpArr[1] + 'A';
                } else {
                if(+tmpArr[0] > 12) {
                    time12 = (+tmpArr[0]-12) + ':' + tmpArr[1] + 'P';
                } else {
                    time12 = (+tmpArr[0]) + ':' + tmpArr[1] + 'A';
                }
                }
                }

            var tmpArrs = t2.split(':'), time13;
                if(+tmpArrs[0] == 12) {
                    time13 = tmpArrs[0] + ':' + tmpArrs[1] + 'P';
                } else {
                if(+tmpArrs[0] == 00) {
                    time13 = '12:' + tmpArrs[1] + 'A';
                } else {
                if(+tmpArrs[0] > 12) {
                    time13 = (+tmpArrs[0]-12) + ':' + tmpArrs[1] + 'P';
                } else {
                    time13 = (+tmpArrs[0]) + ':' + tmpArrs[1] + 'A';
                }
                }
                } 

                element.find('.fc-content').append(t1 + "-" + t2 +);
        }

Upvotes: 0

Views: 752

Answers (1)

Gregory Nikitas
Gregory Nikitas

Reputation: 491

Assuming you have moment.js included in your webpage (as FullCalendar needs it in any case) use the following code in place of declaring var t1 and var t2

var t1 = $.fullCalendar.moment(event.start).format("h:mm A")
var t2 = $.fullCalendar.moment(event.end ).format("h:mm A")

P.S. You don't need to work out the 12 hour format manually, moment.js does this for you

Upvotes: 1

Related Questions