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

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

Open LuckyBressan opened this issue 9 months ago • 5 comments

Please check if the PR fulfills these requirements

[X] 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)
[X] The commit message follows our guidelines
[X] Tests for the changes have been added (for bug fixes/features)
[X] 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. 🎉 😘 ✨

Oct 16 '23 20:10 LuckyBressan

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.

Oct 16 '23 22:10 Zyron

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

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/[email protected]/dist/umd/i18next.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 :smile:

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.

Jan 06 '24 13:01 mpsijm

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. 🫡

Jan 16 '24 23:01 LuckyBressan

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]

Feb 06 '24 17:02 ixeft

@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. 🙂

Feb 06 '24 21:02 LuckyBressan

tui.calendar tui.calendar copied to clipboard

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

Please check if the PR fulfills these requirements

Description

tui.calendar
tui.calendar copied to clipboard