Feat: new feature that allows changing the time interval to 30 minutes. (close #1426) #1426

LuckyBressan · 2023-10-16T20:00:21Z

Please check if the PR fulfills these requirements

It's the right issue type on the title
When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
The commit message follows our guidelines
Tests for the changes have been added (for bug fixes/features)
Docs have been added/updated (for bug fixes/features)
It does not introduce a breaking change or has a description of the breaking change

Description

Hello, how are you?
I am very grateful for this calendar tool that you have developed, and today I would like to offer a new feature. This feature would be the ability to change the default 30-minute interval used for selections, event movement, and adjustments, to a customizable interval for developers, all through a new week option.

Thank you for your contribution to TOAST UI product. 🎉 😘 ✨

…apt to the timeStep

…sizes

adding documentation for the new feature

Zyron · 2023-10-16T22:32:33Z

Love it! 😍

At my university lectures starts 15 minutes past the hour, so the ability to drag and drop at 15 minutes intervall will come in handy!

Google calendar supports moving events at 15 minutes intervall, so great that this now also is possible with Toast UI.

mpsijm · 2024-01-06T13:33:25Z

This is exactly what I needed 😄 Referencing #187 here, since it looks like this PR fixes that issue 🙂

I've tested this in the Calendar widget in Grist. My steps were:

Clone https://github.com/LuckyBressan/tui.calendar_drag-drop_different_30_min.git
- Run npm i and npm run build:calendar
Copy .../tui.calendar_drag-drop_different_30_min/apps/calendar/dist/toastui-calendar.min.* to .../grist-widget/calendar/
Apply this diff to grist-widget:

Diff for grist-widget/calendar

Note that this diff also contains a small change to the CSS in the Grist widget, to make sure that 15-minute events do not overflow. This is related to #563.

diff --git a/calendar/index.html b/calendar/index.html
index 39b479d..da2d6ed 100644
--- a/calendar/index.html
+++ b/calendar/index.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css"/>
+    <link rel="stylesheet" href="./toastui-calendar.min.css"/>
     <link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
     <link rel="stylesheet" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css">
     <link rel="stylesheet" href="screen.css"/>
@@ -68,7 +69,8 @@
   })();
 </script>
 <script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
-<script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
+<script src="./toastui-calendar.min.js"></script>
 <script src="https://unpkg.com/i18next@23.5.1/dist/umd/i18next.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.1/i18nextHttpBackend.min.js"></script>
 
diff --git a/calendar/page.js b/calendar/page.js
index 79b0eaf..440234f 100644
--- a/calendar/page.js
+++ b/calendar/page.js
@@ -147,10 +147,15 @@ class CalendarHandler {
     return {
       week: {
         taskView: false,
         dayNames: [t('Sun'), t('Mon'), t('Tue'), t('Wed'), t('Thu'), t('Fri'), t('Sat')],
+        timeStep: [0, 15, 30, 45],
       },
       month: {
         dayNames: [t('Sun'), t('Mon'), t('Tue'), t('Wed'), t('Thu'), t('Fri'), t('Sat')],
       },
       usageStatistics: false,
       theme: this._calendarTheme(),
diff --git a/calendar/screen.css b/calendar/screen.css
index 9ad7212..e278449 100644
--- a/calendar/screen.css
+++ b/calendar/screen.css
@@ -91,6 +91,11 @@ body {
 
 .toastui-calendar-timegrid {
   height: 100%;
+  min-height: 1500px;
+}
+
+.toastui-calendar-event-time {
+  min-height: 14px;
 }
 
 /*** BEGIN popup-related styling ***/

Host the custom Calendar widget somewhere publicly and use its URL as custom Grist widget

I probably haven't tested everything, but dragging and dropping the events to change the start/end dates works correctly at least, so that makes it usable for me 😄

One remark for the week.timeStep setting: would it make sense to make this setting only a single number, indicating the number of steps, assuming that every step has the same length? This could then be called timeStepsPerHour instead of timeStep. The default setting would then be 2, and a setting that would currently look like timeStep: [0, 15, 30, 45] would be written as timeStepsPerHour: 4.

LuckyBressan · 2024-01-16T23:57:59Z

This is exactly what I needed 😄 Referencing #187 here, since it looks like this PR fixes that issue 🙂

I've tested this in the Calendar widget in Grist. My steps were:

Clone https://github.com/LuckyBressan/tui.calendar_drag-drop_different_30_min.git

Run npm i and npm run build:calendar

Copy .../tui.calendar_drag-drop_different_30_min/apps/calendar/dist/toastui-calendar.min.* to .../grist-widget/calendar/

Apply this diff to grist-widget:

Diff for grist-widget/calendar

Host the custom Calendar widget somewhere publicly and use its URL as custom Grist widget

I probably haven't tested everything, but dragging and dropping the events to change the start/end dates works correctly at least, so that makes it usable for me 😄

One remark for the week.timeStep setting: would it make sense to make this setting only a single number, indicating the number of steps, assuming that every step has the same length? This could then be called timeStepsPerHour instead of timeStep. The default setting would then be 2, and a setting that would currently look like timeStep: [0, 15, 30, 45] would be written as timeStepsPerHour: 4.

I'm glad that my change can help you in your project. 😁
I hope more people can see this pull request and use the branch in their own plans.

Regarding the configuration idea...

At the time I made the changes, I must have been quite distracted not to have simplified it this way. 🤣
I'll take advantage of the fact that you reminded me of this and update the code.

Thank you for your comment. 🫡

ixeft · 2024-02-06T17:04:49Z

I think your way of setting timeStep is more powerful : someone might want to be able to authorize moving by intervals of 10min and by intervals of 15min. timeStepsPerHour does not allow that while timeStep does (timeStep: [10, 15, 20, 30, 40, 45, 50]

LuckyBressan · 2024-02-06T21:37:36Z

@ixeft
You are correct; the initial change is indeed more liberal/powerful in these terms. However, why not simplify? As soon as possible, I will try to update the PR so that if someone sets a value in the timeStepsPerHour attribute, the code will use that value; otherwise, it will use the timeStep. 🙂

LuckyBressan added 8 commits October 16, 2023 23:37

feat: add a new option - timeStep

611ec49

feat: change in createTimeGridData and calls

6aef3b5

feat: add a function that returns information about timeStep

47f76df

feat: change the creation functions of TimeColumn and GridLines to ad…

d3210fb

…apt to the timeStep

feat: change event move and resize to adapt to the timeStep

56b77d7

feat: adapt styles so that events and gridSelection have appropriate …

24f5ccb

…sizes

feat: update tests for the new features

af504dd

docs:

02e4e30

adding documentation for the new feature

mpsijm mentioned this pull request Jan 6, 2024

Question: Is it possible to create/drag events to 15/45mins past the hour #187

Open

vgibilmanno mentioned this pull request Mar 7, 2024

Feature Request: Customizable Interval for Timegrid #1445

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: new feature that allows changing the time interval to 30 minutes. (close #1426) #1426

Feat: new feature that allows changing the time interval to 30 minutes. (close #1426) #1426

LuckyBressan commented Oct 16, 2023

Zyron commented Oct 16, 2023

mpsijm commented Jan 6, 2024 •

edited

LuckyBressan commented Jan 16, 2024

ixeft commented Feb 6, 2024 •

edited

LuckyBressan commented Feb 6, 2024

Feat: new feature that allows changing the time interval to 30 minutes. (close #1426) #1426

Are you sure you want to change the base?

Feat: new feature that allows changing the time interval to 30 minutes. (close #1426) #1426

Conversation

LuckyBressan commented Oct 16, 2023

Please check if the PR fulfills these requirements

Description

Zyron commented Oct 16, 2023

mpsijm commented Jan 6, 2024 • edited

LuckyBressan commented Jan 16, 2024

ixeft commented Feb 6, 2024 • edited

LuckyBressan commented Feb 6, 2024

mpsijm commented Jan 6, 2024 •

edited

ixeft commented Feb 6, 2024 •

edited