I’m currently looking into creating a UI for the JS-Calendar Scheduler Feature.
I have and still am discussing the exact details with my company’s designer and Frontend Dev.
The current plan is to implement two widgets and one new page dedicated to an interactive calendar.
The Widgets are as following:
A quick look up Widget to see which controller(s) are active and what change will be next.
Like:
Currently Active: ctrl0, ctrl1
Changes at: 13:15:00
Next Controller: ctrl1, ctrl3
Starts at: 13:15:00
A more detailed Widgets to have a brief overlook over the config.
Like:
Ctrl0:
Active on: [ Mo ] [ Tu ] We [ Th ] Fr Sa So
During: 08:00:00 - 13:15:00
Ctrl1:
Active on: [ Mo ] [ Tu ] [ We ] [ Th ] [ Fr ] [ Sa ] [ So ]
During: 10:00:00 - 15:00:00
Ctrl3:
Active on: 21.11.2025 (one time)
During: 13:15:00 - 18:00:00
The Full Screen Page is even less concrete, but we’ve decided on the following specification:
Needs to be an actual Calendar
Needs to be able to edit/view hours/week/month
New Controllers should be able to be created in this view
Everyone with access to an edge should be able to change the calendar
We have found a few Calendar Packages which we could use:
Bryntum Calendar - Examples
Basically Perfect, but sadly Paid, and quite expensive at that. Also not Open Source.
So I am here to ask if anyone already has specific ideas for how this all should work or will be used elsewhere, or concerns with the modularity of this feature given it will be used for more tasks than this one. Or just general input.
I haven’t done actual Frontend code yet, so any feedback before I start is appreciated
Great to hear, that you want to implement an UI for the JS-Calendar scheduler feature.
There is already a graphical calendar in the UI history, to select a custom date range. IMHO it would be good, if the different calendars look (and behave) the same, to offer consistency to the user.
I don’t know much about the context of (the JS-Calender) scheduler usage. I believe it could be helpful to spend some time understanding the tasks and context (and maybe also user), to derive requirements which should guide the graphical design.
For example, I could imagine that setting up the scheduler component (task) would happen on a computer with a keyboard (context) by someone who is used to administer systems (user). If this is true, a keyboard based text-input possibility in addition to a graphical calendar UI could be helpful.
Before starting coding, a UI wireframe (hand sketched or using a tool like penpot or figma) can help to detail the concept.
JSCalendar is a very important core feature in OpenEMS and it is going to be used in a lot of places - from JSCalendar-Scheduler, to EV-Charging planning, to Multi-Use ESS applications, etc.
I am curious to hear your ideas on how this could look like. UI wireframes, as suggested by @sjjh, are certainly a very good idea!
I just wanted to let you know, that I added a JSONRPC-Request/Respone for JSCalendar OneTasks in a recent FEMS backport. Maybe you can already use it. There is also a minimum proof of concept of receiving the data in the UI for Controller.IO.HeatingRoom.
Hey, I already started implementing the Calendar in the UI now. Our UI Designer is ill so im flying blind for the time being and am just trying things out. But here is my current state of things:
Ive decided on using angular-calendar as i feel like it provides the best balance of customization and features.
Ive implemented a Scheduler-Specific JSCalendar “engine” which provides the calendar with the correct events for a given time range, but this engine can be made more generic to support any JSCalendar in the future (payloads). This engine handles recurring events and acts as a translation layer between the JSCalendar data format and the angular-calendar data format. It also supports moving/resizing events and updates recurrence rules accordingly.
To give the user a sense of which events are connected and which aren’t, i am giving each event a name (and all of its recurrence “children”), and based on that name im generating a random but deterministic color. That way the edge doesn’t need to store colors and the calendar will look the same on every device.
Regarding using the existing calendar. There are a lot of issues with that:
It doesn’t support showing an hour view
It is directly linked to the History page and not easily reusable
It is build into the component that you cant look into the future
=> Its out of scope for this feature to generalize that component
Great to hear that you are implementing a UI for JSCalender! Just an idea on how to maybe continue:
It could be a bit simpler and more generic to start with the agenda view.
I don’t feel like more detail is necessarily advantagous as I see the JSCalender mainly used in multi-use applications where the controllers used contradict each other in their optimization goal, but are active at different times.
Agenda view does not support multiple events at the same time very well, e.g. if one is monthly and one weekly. However it is very usable if you only have one regularity at a time (either monthly/ weekly/ daily/ hourly).
I haven’t had an idea how to then go into the specific controller e.g. to change the peak-shaving power. Thats definetly something for a later date. However new events could in theory be added in here. As long as they don’t overlap.
I didnt really consider not using a calendar to be honest, but its certainly a fair point. Visually displaying Tasks across multiple months while keeping is readable is certainly not / hardly doable. Yeah…
This list view is also easier to implement than an actual Calendar
But there must be a way to communicate overlapping schedules. Maybe a yellow (i) symbol which says “overlaps with x, y, z” or when you click the i button it highlights all overlaps?
Another problem I see is overflowing times, meaning: How to communicate Tasks which end the next (or more) days. Since they may be recurring, you cant really give the user a definite date.
A format like “HH:MM:SS (+X days)” could do the trick though.
Additionally there is the question of how to sort Tasks this way? There should be some sense of order but especially with overlaps it could be very confusing.
There is also the problem that one Task can have any amount of Recurrence Rules, should each Rule just be another entry in the list, if so what happens when you change the controller of this one Rule, then suddenly x other rules are effected too…
The Ui could automatically split rules into separate events and merge all Rules with the same Controller(s) to send this to the Edge?
I believe eventually we will have both - calendar view(s) and agenda view - just like your buttons “WEEK” and “DAY” on top left already indicate.
To clarify some technical details:
JSCalendar.Tasks by design do not support overlapping OneTask. This is intended behaviour. Instead Tasks respect the priority given by the position in the JSON Array.
The JUnit tests show this behaviour
This also means, that in the UI you do not need to care about the “Recurrence Rules”. Just simply display the OneTasks that you receive from the getOneTasks() request.
See this UI code, that produces this very simple agenda view:
I now have this list, it allows for sorting all values. It also supports filtering for Recurrence Rules and Controllers. As well as Fuzzy Search for all Values.
(Editing/Creating/Deleting doesn’t work yet)
Internally the List creates a new entry for Each Recurrence Rule, and then merges all matching entries before saving.
(So like “Daily CTRL7” will be merged with “Weekly CTRL7“ into “Weekly/Daily CTRL7”)
This way every entry in the list only has one rule to worry about, I think this is a good way to not make the UI super cluttered with list of list of list of rules.
While im currently focusing on just making it work with Controllers, the code should be easily adaptable to work with any Payload later, so this can be a reusable component.
It still needs to be made obvious for the user if Tasks Overlap tho, not entirely sure how to do that.
Any Input on how it is right now in regards to functionality? Concerns, Wishes, etc.?
Also I havent investigated yet how I can save data, so a bit for a direction would be appreciated
