Our powerful JS Calendar component


Post by braincept »

Hi Team,

We are facing one issue incase of agenda mode. Please have a look at the code.

<bry-calendar
      [tbar]="tbar"
      [sidebar]="sidebar"
      [resources]="finalResources"
      [eventEditFeature]="features.eventEdit"
      [eventTooltipFeature]="features.eventTooltip"
      [date]="selectedDate"
      [modes]="modes"
      [mode]="selectedMode"
      [scrollable]="true"
      (onCalendarEvents)="onCalendarEvents($event)"
    ></bry-calendar>
onCalendarEvents(event: any): void {
    console.log('Inside  onCalendarEvents event is ', event);
}

Usecase scenario is:
1) Goto the agenda mode
2) change the date selection in sidebar
3) onCalendarEvents is not triggering.

but onCalendarEvents function is triggering incase of month, week and day.


Post by Animal »

Prior to 4.0, AgendaView does not encapsulate a date range. It simply iterates the EventStore and displays all the events that it finds. So it is not in fact changing itself in response

In 4.0 onwards, AgendaView will be configurable to encapsulate a configurable range (This is a new config on AgendaView) around the calendar's active date.

This defaults to year, but can be changed by configuration, and also by a new UI to encapsulate a month, week, or a decade.

This now enables AgendaView to "project" recurring events into its range which did not happen when AgendaView just iterated existing events.


Post by braincept »

Hey Animal

Here it would be very cool if the AgendaView would trigger a listener (with the last time), when you reached the end of the list so we could load another month of data. Just as an input for future development.


Post by Animal »

You can do that by configuring the agenda view like this in your Calendar configuration:

        agenda : {
            scrollable : {
                listeners : {
                    scroll(e) {
                        if (this.y === this.maxY) {
                            // The AgendaView triggers the event. Could also fire from this.widget.calendar
                            // to trigger on the calendar, depends who you want to listen on.
                            this.widget.trigger('endOfRange', { date : this.widget.store.last.date });
                            console.log('end of range: ' + this.widget.store.last.date);
                        }
                    }
                }
            }
        }

Post Reply