Menu
I've been working with FullCalendar plugin for a bit now and I've managed to get it working in FF and Chrome but I can't seem to understand why the events don't show up on Safari.
I am using a Rails backend to fetch the events as an array. This is the JSON object for the events that FireBug displays.
_end: Invalid Date
_id: "1953"
_start: Fri Feb 10 2012 00:00:00 GMT+0530 (IST)
allDay: false
backgroundColor: "#F60 !important"
className: Array[0]
color: "#FFFFFF !important"
description: ""
end: Invalid Date
start: Fri Feb 10 2012 00:00:00 GMT+0530 (IST)
textColor: "#FFFFFF !important"
__proto__: Object
I have no errors on the safari console. The invalid end date shows up as null on FF and Chrome.
Here is how I populate the events
event[:id] = each_event.id
event[:title] = each_event.event_title
event[:allDay] = each_event.all_day?
event[:start] = each_event.start_time.strftime('%Y-%m-%d %H:%M:00')
event[:end] = each_event.end_date.to_time.strftime('%Y-%m-%d %H:%M:00') if each_event.end_date.present?
event[:color] = '#FFFFFF !important'
event[:backgroundColor] = (each_event.user == current_user) ? '#F60 !important' : '#090 !important'
event[:backgroundColor] = '#090 !important' unless each_event.private?
event[:textColor] = '#FFFFFF !important'
I tried converting the datetime to iso8601 format too and it did not work. I'm completely clueless on what the problem is. I would really appreciate some help.
835
Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });
although it is not specified on the fullcalender site, it is necessary to assign a value to the "allday" parameter to be able to add new events dynamically. If you set this value to "false", it will not add the event to the AllDay row. If you do "true" it will add to the AllDay row. Save this answer.
eventRender is a great way to attach effects to event elements, such as a Tooltip. js tooltip effect: var calendar = new Calendar(calendarEl, { events: [ { title: 'My Event', start: '2010-01-01', description: 'This is a cool event' } // more events here ], eventRender: function(info) { var tooltip = new Tooltip(info.
Detect when the user clicks on dates or times. Give the user the ability to select multiple dates or time slots with their mouse or touch device. Allows a user to highlight multiple days or timeslots by clicking and dragging.
I had a similar problem. What helped me was using the .iso8601 function of DateTime:
event[:start] = each_event.start_time.iso8601
event[:end] = each_event.end_date.to_time.iso8601 if each_event.end_date.present?
iso8601 format gives output like: 2017-01-25T16:15:49+01:00
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
