0

Hellow world. I am using Fullcalendar v5. Having problem setting Props dynamicaly on multipule props.

Attached is a code that show the problem.

You can see it in action here: https://codepen.io/roi-werner/pen/vYKXOJp

When a setProp is called more than once, events in the past week are only effected by the last call, and ignores whatever comes before. In this code it suppose to change the name and the background, it doest so only to the event in the view that is initially loaded and not on the others.

    <!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
    <link href='../gse5/fullcalendar-scheduler-5/lib/main.css' rel='stylesheet' />
    <script src='../gse5/fullcalendar-scheduler-5/lib/main.js'></script>
    <script src='../gse5/fullcalendar-scheduler-5/lib/main.min.js'></script>       
  </head>

  <body>
    <div id='calendar'></div>

  <script>    
    var calendarEl = document.getElementById('calendar');
    let today = new Date().toISOString().slice(0, 10)
  
    var calendarEl = document.getElementById('calendar');
  
    myCalendar = new FullCalendar.Calendar(calendarEl, {    
      now: today,    
      aspectRatio: 1.8,    
      initialView: 'timeGridWeek',    
      selectMinDistance: 15,
      events: [
        {
          //please change date to be in the past - needs to be in the week before!
          title: 'TEST1',
          start: '2020-10-16T10:30:00',
          end: '2020-10-16T13:30:00',
        },
        {
          //please change the date to be in the future
          title: 'Test2',
          start: '2020-10-18T10:30:00',
          end: '2020-10-18T13:30:00',
        },
        
      ],
      eventDidMount: function(arg){
        console.log("call eventMount from calendar");
        eventMount(arg);            
      },
    });   
    myCalendar.render();         


  function eventMount(arg){
    console.log(arg.event.title);
    arg.event.setProp('title',"name changed");
    arg.event.setProp('backgroundColor','#666666');  
  }
</script>

</body>
</html>
Roi_W
  • 95
  • 1
  • 1
  • 8
  • Sorry but I can't reproduce your issue. Demo: https://codepen.io/ADyson82/pen/mdPaGvN . It works fine. If you still have a problem, can you please provide a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? Then we can try to understand how exactly this might be happening. Using a standard fullCalendar 5 setup, as I've shown, there's no problem. – ADyson Sep 23 '20 at 10:35
  • Sorry for the very long delayed comment, after looking at your comment I attach code to show the problem. – Roi_W Oct 18 '20 at 11:13
  • "I don't know how to run fullCalendar through codpen"...you can just fork the one I gave you and then it's already set up, all you have to do is put your updated code in there. – ADyson Oct 18 '20 at 12:29
  • Thanks! will play with it tomorrow and see if i can get my code running there as well! – Roi_W Oct 19 '20 at 18:04
  • codepen example added :) – Roi_W Oct 20 '20 at 07:07

1 Answers1

1

Thanks for the demo. I'm not sure exactly what is going on here but it's a bit odd. However, eventDidMount runs after events have been added to the DOM. That could be affecting the behaviour.

If you want to change the properties of the events themselves (rather then directly manipulating the resulting HTML elements) then using the eventDataTransform callback would be more reliable, as this always occurs before the events are rendered to the calendar - in fact it occurs before fullCalendar has even parsed them itself, so you're working directly with the raw data you're supplying to the calendar.

Code:

eventDataTransform: function(eventData)
{
    console.log("call eventDataTransform from calendar");
    return eventTransform(eventData);            
},

and:

function eventTransform(eventData)
{
    console.log(eventData.title);
    eventData.backgroundColor = '#666666'; 
    eventData.title = "name changed";
    return eventData;   
}

Demo: https://codepen.io/ADyson82/pen/LYZRGeE

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • this solution is not working if I am expanding a repeating event and want to change props based on the calculated start of the expanded event. if you have any solution for that, please provide. – Sidharth Bajpai Sep 01 '23 at 08:53
  • 1
    @SidharthBajpai That's true. But it was never intended to cover that scenario, and I did not claim that it could. – ADyson Sep 01 '23 at 08:56
  • 1
    @SidharthBajpai You can easily access the individual start times of repeating events from eventDidMount - demo: https://codepen.io/ADyson82/pen/YzdWYZW – ADyson Sep 01 '23 at 09:24
  • hello, very thank you for quick response. I trying this way but on pressing the navigation button and similar things, only the last setprop inside the eventDidMount works. can you please check and provide a way to make it work on that too. thank you. demo: https://stackblitz.com/edit/stackblitz-starters-r8rgqd?file=src%2Fcalendar%2Fcalendar.component.ts – Sidharth Bajpai Sep 01 '23 at 11:02
  • 1
    @SidharthBajpai I updated the demo at https://codepen.io/ADyson82/pen/YzdWYZW and wasn't able to reproduce that issue. I can guess only that maybe it's some Angular-related issue although I'm not sure why. I am not familiar with Angular at all. If you would like deeper investigation with help from people with relevant expertise I would suggest opening a new question about that specific issue. – ADyson Sep 01 '23 at 11:13
  • I found way to solve this, if anyone stumbles upon same problem here https://stackoverflow.com/a/77025557/19566600 – Sidharth Bajpai Sep 01 '23 at 19:29