Examples

Připravili jsme pro vás celou řadu různých stylů, takže je můžete upravit podle vašich potřeb. Pro každý styl můžete upravit kalendář, jak potřebujete. Pokud máte inspiraci, můžete přejít na začínáme od nuly.

Are you proud of your calendar? Share it here!

Více kalendářů

Můžete vložit několik kalendářů do jednoho zobrazení. V tomto příkladu ukazujeme různé místnosti v kanceláři.

KalendářSpecifikaceHTML

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

Upravit kalendář

To je také užitečné, pokud máte více zdrojů kalendáře - ať už jsou to jiná místa, kluby, aplikace nebo organizace.

Modifikace:

• CSS
• hodiny
• panel

Mobile One Day Calendar Feed

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

KalendářSpecifikaceHTML

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

Edit the calendar

Modifikace:

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

KalendářSpecifikaceHTML

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

Modifikace:

• start and end time
• fixed date
• CSS

Events Hosted as a Tor Hidden Service

Tento kalendář neni nastylovaný ale obsahuje události které mohou být hostovány za firewallem na malém anonymním serveru. [Příklad][tor-example]

Modifikace:

• proxy parametry

Choose Timezones

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

New YorkLondonSingaporeMy Local Time Zone

KalendářSpecifikaceHTML

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

Modifikace:

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

KalendářSpecifikaceHTML

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

Modifikace:

• CSS

CalDAV přihlášení

Open Web Calendar podporuje CalDAV pro okamžitou synchronizaci událostí. Můžete jej použít např. s Nextcloudem.

V následujícím příkladu jsme použili CalDAV k vytvoření události, na kterou se můžete zaregistrovat. Jakmile se zaregistrujete, obdržíte e-mailovou pozvánku a vaše jméno a e-mail se zobrazí v kalendáři.

KalendářSpecifikaceHTML

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

Upravit kalendář

Modifikace:

• Aktivace CalDAV přihlášení
• Šifrování URL
• Účastníci

Viz také:

• Tutorial: Registrace události s Nextcloud
• Blog: CalDAV Přihlášení se s Nextcloudem

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. Umístěte všechny potřebné .ics soubory do [calendars] adresáře.
2. Stáhněte si specifikaci kalendáře a přidejte ji do adresáře [templates].
3. Edit this file and add a section.

Tento kalendář není stylován, ale obsahuje události, které mohou být hostovány za firewall na malém anonymním serveru. Example Umístěte všechny potřebné .ics soubory do adresáře calendars. Stáhněte si specifikaci kalendáře a přidejte ji do templates adresáře.