Feat: new feature that allows changing the time interval to 30 minutes. (close #1426) #1426
Conversation
…apt to the timeStep
|
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. |
|
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:
Diff for grist-widget/calendarNote 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 ***/
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 |
I'm glad that my change can help you in your project. 😁 Regarding the configuration idea... At the time I made the changes, I must have been quite distracted not to have simplified it this way. 🤣 Thank you for your comment. 🫡 |
|
I think your way of setting |
|
@ixeft |
|
Is there any updates on when this feature will be merged to the main project? :) |
Please check if the PR fulfills these requirements
fix #xxx[,#xxx], where "xxx" is the issue number)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. 🎉 😘 ✨