Приклади¶

Ми підготували безліч різних стилів, щоб ви могли редагувати їх відповідно до своїх потреб. Для кожного стилю ви можете редагувати календар і надавати йому потрібну вам форму. Якщо ви надихнулися, ви також можете просто перейти і почати з нуля.

Ви пишаєтесь своїм календарем? Поділіться цим у [розділі Вітрина]!

Кілька календарів¶

Ви можете вставити кілька календарів в одне подання. У цьому прикладі ми показуємо різні кімнати в офісі.

КалендарСпецифікаціяHTML

{
  "css": ".CALENDAR-INDEX-0, .CALENDAR-INDEX-0 .dhx_body, .CALENDAR-INDEX-0 .dhx_title { background-color: #77767b; } .CALENDAR-INDEX-1, .CALENDAR-INDEX-1 .dhx_body, .CALENDAR-INDEX-1 .dhx_title  { background-color: #f9f06b; } .CALENDAR-INDEX-2, .CALENDAR-INDEX-2 .dhx_body, .CALENDAR-INDEX-2 .dhx_title  { background-color: #dc8add; }",
  "date": "2024-07-05",
  "ending_hour": "18",
  "hour_format": "%g:%i %a",
  "prefer_browser_language": true,
  "skin": "dhtmlxscheduler_flat.css",
  "start_of_week": "su",
  "starting_hour": "8",
  "tab": "week",
  "timezone": "Europe/London",
  "title": "Office Rooms",
  "url": [
    "https://open-web-calendar.quelltext.eu/assets/calendars/rooms/call-cell.ics",
    "https://open-web-calendar.quelltext.eu/assets/calendars/rooms/kitchen.ics",
    "https://open-web-calendar.quelltext.eu/assets/calendars/rooms/meeting-room.ics"
  ]
}

<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/rooms.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>

Редагувати календар

Це також корисно, якщо у вас є кілька джерел календарів - будь то різні місця, клуби, програми чи організації.

Модифікації:

CSS
години
вкладка

Стрічка мобільного календаря на один день¶

Ось приклад одноденного огляду Різдвяного дня:

КалендарСпецифікаціяHTML

{
  "controls": [
    "today"
  ],
  "css": ".dhx_cal_navline { display: none !important; height: 0 !important; }\n.dhx_cal_header { top: 0px !important; }\n.dhx_cal_data { top: 35px !important; }",
  "date": "2024-12-24",
  "hour_format": "%g:%i %a",
  "prefer_browser_language": true,
  "skin": "dhtmlxscheduler_flat.css",
  "starting_hour": "9",
  "tab": "day",
  "tabs": [],
  "timezone": "Europe/London",
  "title": "Christmas Calendar",
  "url": "https://open-web-calendar.quelltext.eu/assets/calendars/christmas.ics"
}

<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/christmas-day.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="300px"></iframe>

Редагувати календар

Модифікації:

час початку та закінчення
фіксована дата
CSS

Recurring Events with Categories¶

If you are at home, planning the days with the family, events might have different categories depending on who they are for: work or personal. Events can be single events or occur every day.

КалендарСпецифікаціяHTML

{
  "css": ".CATEGORY-work { background: #E3B024 !important; }\n.CATEGORY-personal { background: #73E324 !important; }\n.dhx_cal_navline, .dhx_scale_bar, .dhx_cal_container, .dhx_cal_header, .dhx_cal_scale_placeholder, .dhx_scale_holder, .dhx_scale_hour {background-color: #f9f06b;}.dhx_scale_holder_now, .dhx_now .dhx_month_head, .dhx_now .dhx_month_body { background-color: #f8e45c;}",
  "date": "2024-04-08",
  "ending_hour": "22",
  "prefer_browser_language": true,
  "specification_url": "https://open-web-calendar.quelltext.eu/assets/templates/family-planning.json",
  "start_of_week": "work",
  "starting_hour": "8",
  "tab": "week",
  "timezone": "Europe/London",
  "title": "Family Planning",
  "url": "https://open-web-calendar.quelltext.eu/assets/calendars/categories.ics"
}

<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/family-planning.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>

Редагувати календар

Модифікації:

час початку та закінчення
фіксована дата
CSS

Заходи, що проводяться як прихований сервіс Tor¶

Цей календар не має стилів, але містить події, які можна розмістити за брандмауером на маленькому анонімному сервері. [Приклад][tor-example]

Модифікації:

параметри проксі

Виберіть часові пояси¶

Для міжнародного календаря можна дозволити вибір часового поясу, в якому відображатимуться події.

КалендарСпецифікаціяHTML

{
  "controls": [
    "today",
    "date"
  ],
  "prefer_browser_language": true,
  "skin": "dhtmlxscheduler_contrast_white.css",
  "tab": "day",
  "tabs": [
    "week",
    "day"
  ],
  "title": "Timezone Example",
  "url": "https://open-web-calendar.quelltext.eu/assets/calendars/timezone-example.ics"
}

<iframe class="open-web-calendar" id="owcTimezoneExample"
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/timezone-example.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>

<!--
  This is HTML and JavaScript that allows changing a calendar URL specific to a timezone.

  TODO: Choose the time zones that you want the viewer to choose:
-->
<select id="timezoneOption"><option value="America/New_York">New York</option><option value="Europe/London">London</option><option value="Asia/Singapore">Singapore</option><option value="">My Local Time Zone</option></select>

<script>
  // TODO: Set the iframe id:
  var calendarIFrameID = "owcTimezoneExample";
  var originalUrl;  // the oririginal URL of the iframe
  var calendarIFrame; // the stored iframe as a variable

  // Save the original URL
  function setInitialTimezone() {
    calendarIFrame = document.getElementById(calendarIFrameID);
    originalUrl = calendarIFrame.src;
    changeTimezone();
  }

  // Change to the selected timezone
  function changeTimezone() {
    console.log("change timezone: " + timezoneOption.value);
    calendarIFrame.src = originalUrl + (timezoneOption.value ? "timezone=" + timezoneOption.value : "");
    console.log("url: " + calendarIFrame.src);
  }

  window.addEventListener("load", setInitialTimezone);
  timezoneOption.onchange = changeTimezone;
</script>

Редагувати календар

Модифікації:

JavaScript
часовий пояс

Вільний і зайнятий¶

Ви можете змінити дизайн залежно від того, вільні ви чи зайняті.

У цьому календарі змінено CSS, тепер фон зелений, а події — помаранчеві або червоні.

КалендарСпецифікаціяHTML

{
  "css": ".dhx_cal_event_clear.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-OPAQUE, .dhx_cal_event_line.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-OPAQUE { background-color: red;  }\n.dhx_cal_event_clear.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-TRANSPARENT, .dhx_cal_event_line.dhx_cal_event_line_start.dhx_cal_event_line_end.TRANSP-TRANSPARENT { background-color: orange; }\n\n.event {\n  height: 57px !important;\n  transform: translate(0px, 4px);\n}\n.dhx_after .dhx_month_body, .dhx_month_body, .dhx_before .dhx_month_body {\n  background-color: lightgreen;\n}\n\n.dhx_month_body:before {\n  content: \"Free\";\n  display: inline-block;\n  transform: translateY(19px);\n}\n\n.dhx_cal_event_clear_date {\n  display: none;\n}\n\n.dhx_cal_event_clear::before {\n  display: none;\n}",
  "prefer_browser_language": true,
  "skin": "flat",
  "tabs": [],
  "url": "https://open-web-calendar.quelltext.eu/assets/calendars/free-busy-events.ics"
}

<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/free-and-busy.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>

Редагувати календар

Модифікації:

CSS

Зареєструйтеся в CalDAV¶

Відкритий веб-календар підтримує CalDAV для миттєвої синхронізації подій. Ви можете використовувати його, напр. з Nextcloud.

У наведеному нижче прикладі ми використали CalDAV для створення події, на яку ви можете зареєструватися. Після реєстрації ви отримаєте запрошення електронною поштою, а ваше ім’я та електронна адреса відобразяться в календарі.

КалендарСпецифікаціяHTML

{
    "css": ".STATUS-TENTATIVE {--dhx-scheduler-event-background: #aaa;}",
    "show_attendees": true,
    "show_organizers": true,
    "show_participant_role": true,
    "show_participant_status": true,
    "skin": "flat",
    "style-event-status-confirmed": true,
    "style-event-status-tentative": true,
    "tabs": [
      "month",
      "week"
    ],
    "title": "CalDAV sign up template",
    "url": "fernet://gAAAAABn1uYHjkiJcey7cas_TRHyXBr0xDEP-R_IsM0jLw0PkMeGHlIgb-rZVHL7_RawixUpafG3JYgeIWpxM3GxvEgSITcXSGwTPZozB61mjwsKNYqdab-gWshwnDJp1iMFDjv8wPyCsWZwB5xpxBaotQ8WZvoZRyi0QUDt8le7G-2sBqvMt59WIL_HFbnIvR3QeZHjyBLWgxj0X0kgiiQ2pHnwIujDraJ2taX2_6VVGu8eXsOCo57XkkGUydR0rqJRVhj4Uow53lu2pfmGhIzOeU9jpqwYWYgWT_Y1ZeuCs6gvXfVBSrVzB3T_3ooZJAQzQIzLxDyV07NHh_d9xzxqoIrET05ApRLc6_cG_zAC-W0SA8Rex1JCyLJOBaD-aohWngeiaNrmMlWHnEdcVje_jNehgy7aDL8yfmR04vfwll_C878rgSU="
}

<iframe class="open-web-calendar" id=""
style="background:url('/assets/img/circular-loader.gif') center center no-repeat; border-radius: 10px;"
src="https://open-web-calendar.hosted.quelltext.eu/calendar.html?specification_url=https://open-web-calendar.quelltext.eu/assets/templates/caldav-signup.json&"
sandbox="allow-scripts allow-same-origin allow-top-navigation"
allowTransparency="true" scrolling="no"
frameborder="0" height="600px" width="100%"></iframe>

Відредагуйте календар

Модифікації:

Активуйте реєстрацію CalDAV
URL-шифрування
Учасники

Дивіться також:

Наведіть приклади!¶

Якщо ви хочете додати ще один приклад або продемонструвати свій календар, вам сюди. Ви можете зв’язатися з нами, надавши посилання на календар, наприклад, у випуску.

Ви можете редагувати сторінку самостійно:

Розмістіть усі необхідні файли .ics у каталозі [calends].
Завантажити специфікацію календаря. І додайте його до каталогу [templates].
Edit this file and add a section.