Few questions about what I want to achieve with this calendar.

[worxflowadmin]

Hello, you guys have done fantastic job with the calendar.

I have following question.

Is it possible to set global background event for calendar which say it is blocked to create event. So say if company has working hours from 9 am to 6 pm and break time is 1 pm to 2 pm? is it possible to disable dateClick for hours except working hours when in time grid or resource time grid view? Currently I am checking time on dateClick event and sending alert to user. Just wanted to know if there is any better way using some global busy event which might apply to all days or selected days..

If anyone can give suggestions or example to achieve above that would be great.

Thank you.

[vkurko]

Hello,

The calendar has a posibility to display background events. To do this, you should pass the "background" value in the display field of the event. Such events do not prevent the call of dateClick, but you can find out where exactly the click occurred in your handler like this:

dateClick: function (info) {
  if (info.jsEvent.target.classList.contains('ec-bg-event')) {
    // Click on a background event
  } else {
    // Click on an empty area
  }
}

[worxflowadmin]

Hello @vkurko ,
Thanks for the reply.
Is it possible to set background event as global for all weekdays? for example I want to set background event from time 00:00 AM to 09:00 AM as background event for each day of the current date range. Is there any way to set it as global background event? Or I need to loop through all days in current date range and set background event for each day in current date range?

Please let me know the best way to achieve this.

Thank you.

[vkurko]

It looks like you need an option similar to businessHours from FullCalendar. Unfortunately, this option is not implemented in Event Calendar. But you can achieve the same result if you generate background events for each period for the required days of the week and time.

[Rasanoob]

Hi, this is very interesting for my goal.

I would like to realize the same and came with a comparable solution. I created background events for parts of the day. Now my problem is that i have to make these events recurring for every week. My idea was to update these background events for all days in the current range. As callback i use the datesset option. I make sure the ec object is available by skipping the first call of datesset and then i can use the ec.view() for example. However ec.update() is not working in this case (throws error in index.js). In other callbacks like the clickevent option it works fine, but i have to update at the change of the daterange.

I would appreciate if someone can help.
Thanks in advance!

[vkurko]

@Rasanoob How do you provide events to the calendar? Through the events or eventSources option?

[Rasanoob]

For now through events. But I'm very new to this so if there is a better option I'm very interested.

[Rasanoob]

Btw I'm trying now to add new events and delete old events instead of updating. Seems to work fine this way. Maybe there is just an issue with the updating function?

[Rasanoob]

This is my code. First I am doing some complex adjusting stuff which is not that important for you. The thing is where the update function is been called, it just doesn't work. Removing/adding is no problem instead.

`datesSet: function (info) {

                    if (!first_call){
                        range_width = Math.round((ec.getView().currentEnd - ec.getView().currentStart)/(24 * 60 * 60 * 1000));
                        if (range_width == 1){
                            diff = Math.floor(Math.round((ec.getView().currentStart - orig_startrange_date)/(24 * 60 * 60 * 1000))/7)*7;
                        } else {
                            diff = Math.round((ec.getView().currentStart - orig_startrange_date)/(24 * 60 * 60 * 1000));
                        }
                        
                        init_start = startrange_date;
                        init_end = startrange_date;
                        
                        iterator = 0;
                        blockedEventArray.forEach(item => { 
                            var item_start = new Date(item.start);
                            var item_end = new Date(item.end);

                            if (range_width == 1) {
                                if (item_start.getDay() != ec.getView().currentStart.getDay()){
                                    iterator = iterator + 1;
                                    return;
                                }
                            }

                            item_start.setDate(item_start.getDate() + diff );
                            item_end.setDate(item_end.getDate() + diff);


                           // some more adjustments

                          item_start_str = `${start_year}-${start_month}-${start_day} ${start_hours}:${start_minutes}:${start_seconds}`;
                            item_end_str = `${end_year}-${end_month}-${end_day} ${end_hours}:${end_minutes}:${end_seconds}`;

                            added = ec.removeEventById(`closed_${iterator}`);
                            created = ec.addEvent({'id': `closed_${iterator}`, 'start': item_start_str, 'end': item_end_str, 'title': '', 'color': '#808080', 'editable': false, 'startEditable': false, 'durationEditable': false, 'display': 'background'});
                            console.log("remove and add")
                            console.log(`closed_${iterator}`)
                            console.log({'id': `closed_${iterator}`, 'start': item_start_str, 'end': item_end_str})

                            iterator = iterator + 1;
                        });
                        
                    }

                    first_call = false;
                    
                    
                },`

[Rasanoob]

Sorry for my late response! Your demo looks good. I cannot reproduce it at my side either. So maybe there was just some other mistake I made which is gone now without noticing. Thanks for your help and keep up the good work with this tool!

[Rasanoob]

@vkurko, I try to display events by a certain ID. For example if the substring "slot" is in the ID of the event it should be hided in the dayview but should be visible in the weekview. My first thought was to hide events when the view is changing but since I don't find a way to hide events completely I was trying to filter them out in the eventSources. This works fine for the initial calendar load, but now I have to do this when the view is changing. I tried something like the code below in the datesSet, but this doesn't work. Do you have any suggestions?

`datesSet: function (info) {
if (!first_call){
console.log(info);
ec.setOption('eventSources', [
{
events: function (fetchInfo) {
bge = generateBackgroundEvents(fetchInfo.start, fetchInfo.end);

                            if (info.view.type == "timeGridWeek"){
                                start_events = Object.values(events_from_view).filter(item => !item.id.includes("event"));
                            } else {
                                start_events = Object.values(events_from_view).filter(item => !item.id.includes("slot"));
                            }
                                
                            ret = bge.concat(start_events);
                            return ret;
                          }
                        }
                        ]);
                    }
                },`

[vkurko]

I think you can try calling refetchEvents when the view changes (you still filter events in the eventSources).

[Rasanoob]

Thanks, I should have seen this by myself actually. But one question... I'm filtering now successful in the eventSources but in the fetchInfo we just have the range begin and end. So I'm checking now how much days this range is and filtering accordingly. However the information about which view is currently loaded is in the viewDidMount info, but I don't have the possibility to pass this to the filtering in eventSource right? It just would be a better way to program instead of checking the days in the time range.

[vkurko]

Yes, unfortunately, not all callbacks pass the current view. Perhaps it would be worthwhile to unify the passed global parameters. For now you can call getView() at any time, as long as the calendar object is already available.