Our powerful JS Calendar component


Post by pe.petrovic »

Dear Bryntum,

Here i will provide you with a list of functionalities that i need covered, with question on how many of these can be supported with combined Calendar/Scheduler components:

  1. I want to create tasks for myself and for my team members (one task per person)

  2. I want to create events for multiple team members

  3. I want to set up start date/time and end date/time for the task/event

  4. I want to change a time zone of my calendar

  5. I want to send details of tasks/events by email

  6. I want to send my available time slots to others so that they can schedule a meeting with me at the convenient time

  7. I want to add events to external calendars (e.g. Outlook Calendar of my contractor)

  8. I want to create videoconference meeting with popular tools (schedule meeting with Zoom, Teams)

  9. I want to see which event attendees have accepted/rejected/not responded to the meeting invitation

  10. I want to customize the pop-up reminders about the task/event (desktop)

Simple yes or no will be enough for me at this point.

Kind regards and thank you!

Petar


Post by mats »

Hi Petar, please find our answers below:

  1. Yes

  2. Yes

  3. Yes

  4. No but coming soon https://github.com/bryntum/support/issues/1407

  5. You can export an event to ICS format which you can attach to an email

  6. Sounds like a server-side task, you can of course get the available time slots by querying the event store. https://bryntum.com/docs/calendar/api/Scheduler/data/EventStore#function-query

  7. You'd have to integrate our Calendar with the Outlook API, which should be quite easy (we're working on such a blog post currently)

  8. You can add a link field perhaps with the link to the Zoom meeting?

  9. Sounds like an application-level problem, should not be hard to implement

  10. This guide covers it: https://bryntum.com/docs/calendar/guide/Calendar/customization/eventedit[/quote]


Post by pe.petrovic »

Thank you for an explanation, I have a few more questions as we are considering this library (Caspio):

  1. Can we achieve pagination and/or infinite scrolling in Calendar component (both vertical and horizontal solutions), as see
    only horizontal scrolling example in Scheduler, can this be also adjusted to Calendar component, do we need Scheduler
    component purchased along with Calendar in order to achieve this? Does CrudManager solves data chunks somehow?
  2. With purchased licence, can we install this npm package without authorizing to your private npm, or this can be achieved
    only with downloading?
  3. Do sidebar of Calendar have custom renderer, i see it can be replaced by plain html, but in order for us to have custom react components (we are using primereact) we need this, for example DatePicker component.
  4. As we are using prime-react is there posibility to add their icon pallete or our own.

Post by alex.l »

  1. Infinite scroll available for Scheduler only, since it has "endless" timeline. And yes, Scheduler licensed separately.
    As you already found, timeline view may be used as one of Calendar modes.
    Yes, CrudManager is able to manage infinite scrolling, you'll need to use loadDateRange event. Here is an example https://bryntum.com/examples/scheduler/infinite-scroll/

  2. There are few options to include our sources to your app.
    Please check https://bryntum.com/docs/calendar/api/guides-include-in-your-app
    and https://bryntum.com/docs/calendar/guide/Calendar/npm-repository
    And yes, If you need npm package, you'll need to download it from our NPM repo.

  3. Any panel may contain plain HTML. All our components are plane HTML and vanilla JS so it won't be a problem.
    But you'll be needed to manage by yourself data binding with your components. We do not support React components as one of fields in the form, together with our fields because of data binding and rendering questions which are potentially solvable but not supported out of the box right now. So you just need to be ready for that.

  4. We have a guide how replace icon font here https://bryntum.com/docs/calendar/guide/Grid/customization/iconfont

All the best,
Alex


Post by mats »

Regarding #1, we have this ticket open to implement infinite scrolling in Calendar: https://github.com/bryntum/support/issues/5281


Post by pe.petrovic »

Okay thanks again for those answers, i also have a few more regarding your responses:

  1. I see that mainly in the code examples, most approaches are with loading full data sets and manipulating internally via
    Event API on client side, what about loading data partially from the backend (e.g. fetch new data for each view, or when
    this infinite scrolling is implemented fetch data while scrolling), loadDateRange as i see here is also working with fulldata set and filtering data on client side.

  2. I see that for event editor for example, we can have a custom react component passed to replace your event editor,
    this is not the case for sidebar, as Alex said we can have it by passing custom html, what i am trying to achieve is probably
    only possible with setting sidebar to null and adding a custom sidebar on our end, what i am concerned here is also data
    binding, did you had these kind of cases maybe in the past?

Thanks again!
Petar


Post by saki »

Re #2: The situation is different for an event editor, which is a popup, and for a sidebar, which is a permanent component. Demo of custom event editor intercepts beforeEventEdit event which is preventable by returning false from the listener. So we always do return false from the listener to prevent the default editor from appearing but before that we show the custom React popup component.

The solution here could be to not show the default Bryntum calendar sidebar at all but to put your React sidebar to the left. This React sidebar could use Bryntum components such as fields and buttons, etc. However, data binding would have to be coded – event listeners, button click handlers, etc.


Post by pe.petrovic »

Thanks Saki i thought so too, what about #1?


Post by Animal »

On the "scrolling", the views do not use HTML scrolling to move through time. But I have implemented a new way of navigating through time which uses mousewheel, or trackpad scroll gestures to do time navigation so that the user experience is similar. The code is in the review stage now, and I am aiming to get this into the next release.

Here's what the configuration will look like:

Screenshot 2022-09-21 at 14.42.56.png
Screenshot 2022-09-21 at 14.42.56.png (74.74 KiB) Viewed 506 times

To dynamically load events, use the dateRangeChange event.

That will fire when the EventStore is interrogated by a view and the date range asked for is not present in the store.

It does not fire every time the EventStore is queried.

For example if you have a MonthView visible, then move to a WeekView, the date range is available; it is a subset of what is in there.

If you wish to load new events on every view change, hook the beforeActiveItemChange event to empty the Store, then when the view requests the events for its range, the dateRangeChange event will always fire.

I think we have people who do this, I have answered questions about it recently.


Post by pe.petrovic »

And the last one:

  1. WCAG 2.1 compliance?

Post Reply