Hyppää sisältöön

Examples

Olemme valmistaneet useita erilaisia tyylejä, jotta voit muokata niitä tarpeidesi mukaan. Jokaisen tyylin kohdalla voit muokata kalenteria ja muokata sitä haluamallasi tavalla. Jos olet inspiroitunut, voit myös vain mennä ja aloittaa alusta.

Oletko ylpeä kalenteristasi? Jaa se [Esittelyosiossa]!

Useita kalentereita

Useita kalentereita voidaan upottaa yhteen näkymään. Tässä esimerkissä näytämme eri huoneet toimistossa.

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

Muokkaa kalenteria

Tämä on hyödyllistä myös, jos sinulla on useita kalenterilähteitä – olipa kyse sitten eri paikoista, kerhoista, sovelluksista tai organisaatioista.

Muutokset:

  • CSS
  • tunnit
  • välilehti

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>

Edit the calendar

Muutokset:

  • 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

Muutokset:

  • start and end time
  • fixed date
  • CSS

Events Hosted as a Tor Hidden Service

Tämä kalenteri ei ole tyylitelty, mutta sisältää tapahtumia, joita voidaan isännöidä palomuurin takana pienellä anonyymillä palvelimella. [Esimerkki][tor-example]

Muutokset:

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

Muutokset:

  • 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

Muutokset:

  • CSS

CalDAV-rekisteröinti

Open Web Calendar tukee CalDAV:ia tapahtumien välittömään synkronointiin. Voit käyttää sitä mm. Nextcloudin kanssa.

Alla olevassa esimerkissä loimme CalDAV-tapahtuman, johon voit rekisteröityä. Rekisteröitymisen jälkeen saat sähköpostikutsun ja nimesi, ja sähköposti näkyy kalenterissa.

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

Muokkaa kalenteria

Muutokset:

  • Aktivoi CalDAV-rekisteröinti
  • URL-salaus
  • Osallistujat

Katso myös:

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. Sijoita kaikki vaaditut .ics-tiedostot [calendars]-hakemistoon.
  2. Lataa kalenterin määritys, ja lisää se [templates]-hakemistoon.
  3. Edit this file and add a section.

This calendar is not styled but contains events that can be hosted behind a firewall on a little anonymous server. Example Place all required .ics files in the calendars directory. Download the specification of the calendar. And add it to the templates directory.