0

By default, FullCalendar stretches the event base on the starting date up to end date. For example,

{
"title": "2",
"start": "2017-12-17",
"end": "2017-12-20",
"icon": "fa-truck"
},

enter image description here

My problem is kinda similar here Recurring Events in FullCalendar, but this one uses time and days of week.

What I want is that the event "Truck" will keep appearing every date, from 2017-12-17, 2017-12-18, 2017-12-19, 2017-12-20.

This is my code.

function calendar(data){
        $('#calendar').fullCalendar({
             events: data,
             eventRender: function(event, element) {
                  if(event.icon){          
                     element.find(".fc-event-title").prepend("<i class='fa "+event.icon+"'></i>");
                  }
               }
        });
    }
Vahn Marty Cagalawan
  • 579
  • 2
  • 7
  • 23
  • 3
    So, instead of one stretched event base, you want to have four individual ones with one per date? Why don't you just enter four separate events? – Geshode Dec 18 '17 at 06:05
  • @Geshode because it's a same event. The start date indicates when the Item was borrowed, and the end date indicates when the Item needs to be returned. – Vahn Marty Cagalawan Dec 18 '17 at 06:10
  • 1
    So, just set start and end date to the same day and repeat that for all four days. Is more work, but shouldn't be a problem. – Geshode Dec 18 '17 at 06:12
  • what Geshode says is the only way you can do it (apart from using the extension code described in the link you posted) - if you don't render this as separate event objects, there's no way to correctly position the title over the subsequent days. – ADyson Dec 18 '17 at 09:54

1 Answers1

2

Generate server side code which will return you json in following format. You can cross check this using javascript as well with hard values.

{
"title": "2",
"start": "2017-12-17",
"end": "2017-12-17",
"icon": "fa-truck"
},
{
"title": "2",
"start": "2017-12-18",
"end": "2017-12-18",
"icon": "fa-truck"
},
{
"title": "2",
"start": "2017-12-19",
"end": "2017-12-19",
"icon": "fa-truck"
},

AND so on...

You can assign above json to data var and check. and then update the server side code.

Anup Yadav
  • 2,825
  • 3
  • 21
  • 30
  • Thank you for this idea mate. And now I got it working based from my new question here. https://stackoverflow.com/questions/47917157/laravel-collection-push-not-properly-working/47917298#47917298 – Vahn Marty Cagalawan Dec 21 '17 at 03:26