Preskočiť na obsah

Examples

Pripravili sme pre vás množstvo rôznych štýlov, aby ste si ich mohli upraviť podľa svojich potrieb. Pre každý štýl si môžete kalendár upraviť a tvarovať podľa svojich potrieb. Ak vás to inšpiruje, môžete tiež jednoducho start from scratch.

Ste hrdí na svoj kalendár? Podeľte sa oň v [sekcii Prezentácia]!

Viac kalendárov

Môžete vložiť niekoľko kalendárov do jedného pohľadu. V tomto príklade ukážeme rôzne izby v kancelárii.

{
  "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>

Upraviť kalendár

To je tiež užitočné, ak máte viacero zdrojov kalendára - byť rôzne miesta, kluby, aplikácie alebo organizácie.

Modifications:

  • CSS
  • hodín
  • aktuality

Mobile One Day Calendar Feed

Here is an example of a one day view of a Christmas day:

{
  "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>

Upraviť kalendár

Modifications:

  • start and end time
  • fixed date
  • 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.

{
  "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>

Edit the calendar

Modifications:

  • start and end time
  • fixed date
  • CSS

Events Hosted as a Tor Hidden Service

Tento kalendár nie je štylizovaný, ale obsahuje udalosti, ktoré je možné hostiť za firewallom na malom anonymnom serveri. Príklad

Modifications:

Choose Timezones

For an international calendar, you can allow choosing the time zone that the events are displayed in.

{
  "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>

Edit the calendar

Modifications:

  • JavaScript
  • timezone

Free and Busy

You can change the design based on whether you are free or busy.

This calendar has changed CSS so that the background is green and the events are either orange or red.

{
  "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>

Edit the calendar

Modifications:

  • CSS

Registrácia do CalDAV

Open Web Calendar podporuje CalDAV pre okamžitú synchronizáciu udalostí. Môžete ho použiť napríklad s Nextcloud.

V nižšie uvedenom príklade sme na vytvorenie udalosti, na ktorú sa môžete prihlásiť, použili CalDAV. Po registrácii dostanete e-mailovú pozvánku a vaše meno a e-mail sa zobrazia v kalendári.

{
    "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>

Upraviť kalendár

Modifications:

  • Aktivujte registráciu CalDAV
  • Šifrovanie URL
  • Účastníci

Pozri tiež:

Contribute Examples!

If you want to add another example or showcase your calendar, this is the place. You can contact us with the link of the calendar e.g. in an issue.

You can edit the page yourself:

  1. Umiestnite všetky požadované súbory .ics do adresára calendars.
  2. Stiahnite si špecifikáciu kalendára. A pridajte ju do adresára templates.
  3. Edit this file and add a section.