search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Calendar Flickering in Updates

Asked by Anonymous
6 months ago.
useEffect(() => {
  if (pickedService.length > 0 && gender !== "") {
    pickedService.forEach((service) => {
      let event = calendarRef.current!.control.events.find(
        service.extra.appointment_id ?? service.service.id_service
      );

      if (service.extra.toDelete === false) {
        if (event !== null) {
          let clientName = setIsEditingEventPosition(true);
          calendarRef.current!.control.events.update({
            id: service.extra.appointment_id ?? service.service.id_service,
            text: service.service.id_service,
            start: service.date!["start"],
            end: service.date!["end"],
            resource: service.resource.id,
            cssClass: service.extra.appointment_id
              ? "draft_selected_event"
              : "draft_event",
            barHidden: true,
            tag: {
              marker: service.service.ec_color_light,
              client:
                (!name ? "Passaggio" : name) +
                " " +
                (surname ??
                  (surname ||
                    (watchFields.id_cus === undefined
                      ? gender
                      : extractGenderFromID(watchFields.id_cus!)))),
              service: service.service.name,
              writtenNote: note,
              note:
                service.extra.note !== undefined && service.extra.note !== "",
              heart: service.extra.worker_lock !== "0",
              clock: service.extra.time_lock !== "0",
            },
          });
        } else {
          setIsEditingEventPosition(true);
          const event = new DayPilot.Event({
            id: service.extra.appointment_id ?? service.service.id_service,
            text: service.service.id_service,
            start: service.date!["start"],
            end: service.date!["end"],
            resource: service.resource.id,
            barHidden: true,
            cssClass: service.extra.appointment_id
              ? "draft_selected_event"
              : "draft_event",
            tag: {
              marker: service.service.ec_color_light,
              service: service.service.name,
              client:
                (!name ? "Passaggio" : name) +
                " " +
                (surname ??
                  (surname ||
                    (watchFields.id_cus === undefined
                      ? gender
                      : extractGenderFromID(watchFields.id_cus!)))),
              writtenNote: service.extra.note,
              note:
                service.extra.note !== undefined && service.extra.note !== "",
              heart: service.extra.worker_lock !== "0",
              clock: service.extra.time_lock !== "0",
            },
          });
          calendarRef.current?.control.events.add(event);
        }
      }
    });
  } else {
  }
}, [pickedService, gender, deferredQueryName, deferredQuerySurname]);

When i run this code, everytime the useffect is performed the whole calendar events flickers, not just those whom i'm dealing with. Why?

Answer posted by Dan Letecky [DayPilot]
6 months ago.

1. I recommend checking what actually flickers.

In my tests, I have never seen the Calendar flickering - although most updates redraw the whole calendar.

However, if you add images to events/headers, they may flicker as you refresh the calendar if they are not cached on the client side. In this case, I recommend checking the HTTP headers - make sure that the images are properly cached and not reloaded on every update (you will be able to check this using the browser developer tools).

2. Also, when updating many items at once, it’s better to create a complete data set and update the calendar just once:

const events = [ /* ...the new event data set... */ ];
calendarRef.current?.control.update({events});

3. See also my response here:

https://forums.daypilot.org/question/6151/events-update-updates-the-whole-calendar-and-not-the-only-e

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.