Calendar

[frankvp11]

I was working on a project wherein I needed a calendar.
I came across this, and was wondering if it was possible to implement this using nicegui, considering nicegui uses Quasar (iirc) under the hood.
https://github.com/quasarframework/quasar-ui-qcalendar/tree/dev
It is crucial to my project that I get some sort of calendar going.

Currently, I am trying to break this problem down into small parts - more specifically, I am now trying to display one singular event overtop a singular day, however I am having issues with that already due to some odd / funky positioning problems

Edit:
I am aware that there is already currently support for having a full month calendar, however I thought it would be interesting if we could expand this into weeks / days (realistically, weeks would just be repeated days).

[frankvp11]

#!/usr/bin/env python3
import datetime
from nicegui import ui, app

@ui.page("/")
def main():
        ## 9.5 == 9:30
        # 9:30 - 5:00 = 4.5
        # 4.5 / 18 = 0.25
    with ui.row().style("width: 100%; height: 100%;"):
        with ui.column().style("width:10%; height: 100%; "):
            ui.label("Hours").style(f"height: {100/18}%")
            for hour in range(5, 23):
                ui.label(str(hour)+ ":00").style(f"height: {100 / 18}%; position: absolute; top: {((hour - 5) / 18) * 100}%;")

        with ui.column().style("width:10%; height: 100%; display:grid; "):
            ui.label("Monday").style(f"height: {100/18}%;")
            display_events([
                {"name": "Math", "start_time": 9.5, "duration": 1, "color": "red"},
                {"name": "Science", "start_time": 11, "duration": 2, "color": "blue"},
                {"name": "Stuff", "start_time": 14.5, "duration": 0.8, "color": "blue"}
            ])

def display_events(events):
    start_time = datetime.time(5)
    end_time = datetime.time(22)
    total_hours = (datetime.datetime.combine(datetime.date.today(), end_time) - 
                   datetime.datetime.combine(datetime.date.today(), start_time)).total_seconds() / 3600

    for event in events:
        percent_down = (event['start_time'] - 5) / (total_hours+1) * 100
        height_of_event = (event['duration'] / (total_hours+1)) * 100
        ui.label(event['name']).style(f"position: absolute; top: {percent_down }%; height: {height_of_event}%; width: 10%; background-color: {event['color']};")

ui.run(title="Calendar")

This approach appears to be the closest that I can get it, however I'm sure that there's a better way. I don't know web dev as well as I should, but I'm sure that there's a way to overlap a div / textbox / button over a calendar element somehow. This also still needs to get gridlines in there, and i'm near certain that it's not 100% accurate.

[falkoschindler]

Thanks for sharing, @frankvp11!

It's certainly a good start, even though the pixel-perfect layout can get tricky. What's your definition of done? Depending on the number of features it's a huge project. But a great exercise for HTML/CSS/Tailwind! 🤓

If you need lots of different views and user interaction, you could also consider integrating a free JavaScript event calendar. There are plenty of them out there. Third-party libraries like AG Grid, Plotly, Highcharts etc. provide so much functionality with so little code required for integration. It might be worth a look. And in case we want to integrate an event calendar into NiceGUI, it's much less code and documentation to maintain.

[frankvp11]

To be honest, it's been a while since I've worked with nicegui, so I'll have to figure out how to run Javascript elements with nicegui again.
But yeah, that is the general idea that I plan on doing - I would like to run something like https://fullcalendar.io/docs perhaps in nicegui, as there's realistically no point in trying to re-invent the wheel 😅. As for what defines "done" for me, realistically, it'd be something like this: https://fullcalendar.io/demos

[frankvp11]

OHHH this is so close to how I want it 😄

from nicegui import ui, client, app

@ui.page("/")
def main():
    # Create an HTML container for the FullCalendar
    calendar_container = ui.html('<div id="calendar"></div>').style("width: 100%; height: 600px;")

    # Make sure the client is connected before loading and initializing FullCalendar
    app.on_connect(load_and_initialize_fullcalendar)

def load_and_initialize_fullcalendar():
    ui.run_javascript('''
        // Load jQuery
        let jqueryScript = document.createElement("script");
        jqueryScript.src = "https://code.jquery.com/jquery-3.6.0.min.js";
        document.body.appendChild(jqueryScript);

        // Load Moment.js
        let momentScript = document.createElement("script");
        momentScript.src = "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js";
        document.body.appendChild(momentScript);

        // Load FullCalendar CSS
        let link = document.createElement("link");
        link.href = "https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css";
        link.rel = "stylesheet";
        document.head.appendChild(link);

        // Load FullCalendar JS after jQuery and Moment.js have loaded
        Promise.all([
            new Promise(resolve => jqueryScript.onload = resolve),
            new Promise(resolve => momentScript.onload = resolve)
        ]).then(() => {
            let script = document.createElement("script");
            script.src = "https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js";
            script.onload = function() {
                // When FullCalendar JS is loaded, initialize the calendar
                $('#calendar').fullCalendar({
                    defaultView: 'agendaWeek',
                    events: [
                        {
                            title: 'Math',
                            start: new Date().toISOString().slice(0,10) + ' 09:30:00',
                            end: new Date().toISOString().slice(0,10) + ' 10:30:00',
                            color: 'red'
                        },
                        {
                            title: 'Science',
                            start: new Date().toISOString().slice(0,10) + ' 11:00:00',
                            end: new Date().toISOString().slice(0,10) + ' 13:00:00',
                            color: 'blue'
                        }
                    ]
                });
            };
            document.body.appendChild(script);
        });
    ''')

ui.run(title="Calendar")

[frankvp11]

Might someone be able to help me understand why the Science tab isn't showing the proper "height"? I managed to fix the width, but the height is still too small
Could it be the JSON ?

[falkoschindler]

Very nice! 😀

I found an even simpler integration by adapting the "getting started" example from their website. It uses the most recent version and the box size seems to be just right:

ui.element().classes('my-calendar').style("width: 100%; height: 600px;")
ui.add_head_html('''
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.querySelector('.my-calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            events: [
                {
                    title: 'Math',
                    start: new Date().toISOString().slice(0,10) + ' 09:30:00',
                    end: new Date().toISOString().slice(0,10) + ' 10:30:00',
                    color: 'red'
                },
                {
                    title: 'Science',
                    start: new Date().toISOString().slice(0,10) + ' 11:00:00',
                    end: new Date().toISOString().slice(0,10) + ' 13:00:00',
                    color: 'blue'
                }
            ]
        });
        calendar.render();
    });
    </script>
''')

[frankvp11]

Awesome thank you. I realized that I had an older version (oops) and got that fixed, but yeah the html is 100% better.
Thanks 😁. Once I get something of substance, I might make an example (who knows, someone might want it).

[frankvp11]

I was trying to do something with this, and was wondering if you could help me debug this.
I wanted to see if I could add this in a ui.menu / ui.card element (like, imbedded within), however it appears to just not render (very strange).
The other strange thing is that I'm not seeing any errors in the console.
The following is what code I am currently trying for this:

    def place_card():
        card_element = ui.card().style("position: fixed; left:50%: top: 50%; z-index: 1000; height: 600px; width:1000px;").classes("my-calendar")
        with card_element:
            ui.add_body_html('''
                <script src='https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js'></script>
                <script>
                document.addEventListener('DOMContentLoaded', function() {{
                    var calendarEvents = {events_json};

                    window.calendarInstance = new FullCalendar.Calendar(document.querySelector('.my-calendar'), {{
                        initialView: 'timeGridWeek',
                        slotMinTime: "05:00:00",
                        slotMaxTime: "22:00:00",
                        allDaySlot: false,
                        timeZone: 'local',
                        height: 'auto',
                        events: 
                            calendarEvents
                        
                    }});
                    window.calendarInstance.render();
                }});
                </script>
            '''.format(events_json=json.dumps(globalState.events)))
            
            ui.button("Close", on_click=lambda : card_element.delete())

[frankvp11]

Ok this is quite strange - the reason that this is strange is because I am running this function from a button press. When I run the function regularly it works just fine, but when it's done from a button press it doesn't work. Would you like me to create a new ticket, for unexpected behaviour or?
Because basically, when I press the button which calls this function, it properly opens the menu, but it doesn't render anything. This is making me think that it's rendering it somewhere else?

[falkoschindler]

How is place_card called?
It might be a problem that the calendar is only created on DOMContentLoaded. You probably need to separate the FullCalendar instantiation from displaying it with the current events.

[frankvp11]

I made a post on discord, but I'll respond here anyways.
It's called via a button click

[retsyo]

I found one, which uses MIT license
https://github.com/nhn/tui.calendar

[falkoschindler]

This one looks really nice!

Meanwhile @frankvp11 has been working on integrating FullCalendar into NiceGUI (PR #2054), which is also MIT-licensed. There's still a chance to switch libraries, I guess.

What do you think, do you prefer one over the other? TUI Calendar looks a bit better to me, but FullCalendar has around 50% more stars and seems to be actively developed, while TUI Calendar hasn't released any updates since August 2022.

[retsyo]

I choose https://github.com/nhn/tui.calendar. The conclusion can be found by toying demo pages, i.e. https://ui.toast.com/tui-calendar and https://fullcalendar.io/demos respectively. In other words, I don't read the manual at all; because I believe that people trends to reveal all features instead of hidding them, if no feature is shown I think this feature is not supported. Correct me if I am wrong.

1. The standard MIT-licensed fullcanlendar does not support "Vertical Resource View", on the other hand, tui.calendar supports it. This feature is more common for our daily study/work, for example, students have math class from 9:00-11:00 on Monday, but 9:00-10:00 on Friday. So I think tui.calendar wins even only this criterion is used.

2. due to 1, we can drag tasks in tui.calendar to expand on horizontal or vertical direction, MIT-licensed fullcanlendar runs in horizontal direction only. However, none of them supports to exapnd on both horizontal and vertical directions.

3. tui.calendar supplies Ready to Use: Default Popups. I don't find such a thing on https://fullcalendar.io/demos page. If it is true, tui.calendar wins again

P.S. there must be more calendar widgets in JavaScript with friendly license. But I am not a front-end programmer, no I am not a programmer at all, so I can't recommend more.

[falkoschindler]

Thanks, @retsyo. At least you convinced me that we need to think about the alternatives once again, before putting too much effort into integrating a suboptimal calendar library. Therefore I moved the new FullCalendar element from #2054 into an example and closed the PR without turning it into an official NiceGUI element.