{"id":8,"date":"2024-03-27T20:25:58","date_gmt":"2024-03-27T20:25:58","guid":{"rendered":"https:\/\/howto.openki.net\/?page_id=8"},"modified":"2026-02-06T14:46:39","modified_gmt":"2026-02-06T14:46:39","slug":"calendars","status":"publish","type":"page","link":"https:\/\/howto.openki.net\/?page_id=8","title":{"rendered":"The Openki i-Frame Generator"},"content":{"rendered":"<p> Here you can create your individual Openki iframe to blend in with the style of your webpage. <\/p>\n\r\n\r\n<script>\r\n    function updateIFrame() {\r\n        var url = document.getElementById(\"urlInput\").value;\r\n        var group = document.getElementById(\"groupCheckbox\").checked ? document.getElementById(\"groupInput\").value : \"\";\r\n        var bgcolor = document.getElementById(\"bgcolorCheckbox\").checked ? document.getElementById(\"bgcolorInput\").value.replace(\"#\", \"\") : \"\";\r\n        var textColor = document.getElementById(\"textColorCheckbox\").checked ? document.getElementById(\"textColorInput\").value.replace(\"#\", \"\") : \"\";\r\n        var itemBg = document.getElementById(\"itemBgCheckbox\").checked ? document.getElementById(\"itemBgInput\").value.replace(\"#\", \"\") : \"\";\r\n        var itemTextColor = document.getElementById(\"itemTextColorCheckbox\").checked ? document.getElementById(\"itemTextColorInput\").value.replace(\"#\", \"\") : \"\";\r\n        var linkColor = document.getElementById(\"linkColorCheckbox\").checked ? document.getElementById(\"linkColorInput\").value.replace(\"#\", \"\") : \"\";\r\n        var regionBg = document.getElementById(\"regionBgCheckbox\").checked ? document.getElementById(\"regionBgInput\").value.replace(\"#\", \"\") : \"\";\r\n        var regionTextColor = document.getElementById(\"regionTextColorCheckbox\").checked ? document.getElementById(\"regionTextColorInput\").value.replace(\"#\", \"\") : \"\";\r\n        var fontSize = document.getElementById(\"fontSizeCheckbox\").checked ? document.getElementById(\"fontSizeInput\").value : \"\";\r\n        var start = document.getElementById(\"startCheckbox\").checked ? document.getElementById(\"start\").value : \"\";\r\n        var end = document.getElementById(\"endCheckbox\").checked ? document.getElementById(\"end\").value : \"\";\r\n        var count = document.getElementById(\"countCheckbox\").checked ? document.getElementById(\"count\").value : \"\";\r\n        var width = document.getElementById(\"widthCheckbox\").checked ? document.getElementById(\"width\").value + \"px\" : \"\";\r\n        var height = document.getElementById(\"heightCheckbox\").checked ? document.getElementById(\"height\").value + \"px\" : \"\";\r\n        var newSrc = url + \"\/frame\/calendar\/?\";\r\n        var params = [];\r\n        if (group) params.push(\"group=\" + group);\r\n        if (bgcolor) params.push(\"bgcolor=\" + bgcolor);\r\n        if (textColor) params.push(\"color=\" + textColor);\r\n        if (itemBg) params.push(\"itembg=\" + itemBg);\r\n        if (itemTextColor) params.push(\"itemcolor=\" + itemTextColor);\r\n        if (linkColor) params.push(\"linkcolor=\" + linkColor);\r\n        if (regionBg) params.push(\"regionbg=\" + regionBg);\r\n        if (regionTextColor) params.push(\"regioncolor=\" + regionTextColor);\r\n        if (fontSize) params.push(\"fontsize=\" + fontSize);\r\n        if (start) params.push(\"start=\" + start);\r\n        if (end) params.push(\"end=\" + end);\r\n        if (count) params.push(\"count=\" + count);\r\n        newSrc += params.join(\"&\");\r\n        var iframeContainer = document.getElementById(\"iframeContainer\");\r\n        var iframeCode = '<iframe id=\"openkiIframe\" name=\"Openki Calendar\" scrolling=\"yes\" seamless=\"\" src=\"' + newSrc + '\" width=\"' + width + '\" height=\"' + height + '\" frameborder=\"0\"> <\/iframe>';\r\n        iframeContainer.innerHTML = iframeCode;\r\n        document.getElementById(\"iframeCode\").value = iframeCode;\r\n    }\r\n    function copyToClipboard() {\r\n        var textarea = document.getElementById(\"iframeCode\");\r\n        textarea.select();\r\n        document.execCommand(\"copy\");\r\n        alert(\"Source code copied to clipboard!\");\r\n    }\r\n<\/script>\r\n\r\n\r\n<form id=\"iframeSettingsForm\">\r\n    <div style=\"display: flex; flex-wrap: wrap;\">\r\n        <div style=\"flex: 1; margin-right: 20px;\">\r\n            <label for=\"urlInput\">Openki URL:<\/label><br>\r\n            <input type=\"text\" id=\"urlInput\" value=\"https:\/\/staging.openki.net\"><br>\r\n            <label for=\"groupInput\">Group ID:<\/label><br>\r\n            <input type=\"text\" id=\"groupInput\" value=\"90aa41f3\"><input type=\"checkbox\" id=\"groupCheckbox\" checked><br>\r\n            <label for=\"fontSizeInput\">Font size (in px):<\/label><br>\r\n            <input type=\"number\" id=\"fontSizeInput\" value=\"14\"><input type=\"checkbox\" id=\"fontSizeCheckbox\"><br>\r\n            <label for=\"start\">Start date:<\/label><br>\r\n            <input type=\"date\" id=\"start\" name=\"start\" value=\"2024-02-03\"><input type=\"checkbox\" id=\"startCheckbox\" checked><br>\r\n            <label for=\"end\">End date:<\/label><br>\r\n            <input type=\"date\" id=\"end\" name=\"end\" value=\"2024-02-10\"><input type=\"checkbox\" id=\"endCheckbox\"><br>\r\n            <label for=\"count\">How many to show initially:<\/label><br>\r\n            <input type=\"number\" id=\"count\" name=\"count\" value=\"5\" checked><input type=\"checkbox\" id=\"countCheckbox\" checked><br>\r\n            <label for=\"width\">Width (in pixels):<\/label><br>\r\n            <input type=\"number\" id=\"width\" name=\"width\" value=\"600\" checked><input type=\"checkbox\" id=\"widthCheckbox\" checked><br>\r\n            <label for=\"height\">Height (in pixels):<\/label><br>\r\n            <input type=\"number\" id=\"height\" name=\"height\" value=\"260\" checked><input type=\"checkbox\" id=\"heightCheckbox\" checked><br><br>\r\n        <\/div>\r\n\r\n        <div style=\"flex: 1;\">\r\n\r\n            <label for=\"bgcolorInput\">i-frame Background color:<\/label><br>\r\n            <input type=\"color\" id=\"bgcolorInput\" value=\"#f9f9f9\"><input type=\"checkbox\" id=\"bgcolorCheckbox\" checked><br>\r\n            <label for=\"textColorInput\">Text color:<\/label><br>\r\n            <input type=\"color\" id=\"textColorInput\" value=\"#000000\"><input type=\"checkbox\" id=\"textColorCheckbox\"><br>\r\n            <label for=\"itemBgInput\">Item background color:<\/label><br>\r\n            <input type=\"color\" id=\"itemBgInput\" value=\"#ffffff\"><input type=\"checkbox\" id=\"itemBgCheckbox\"><br>\r\n            <label for=\"itemTextColorInput\">Item text color:<\/label><br>\r\n            <input type=\"color\" id=\"itemTextColorInput\" value=\"#000000\"><input type=\"checkbox\" id=\"itemTextColorCheckbox\"><br>\r\n            <label for=\"linkColorInput\">Link color:<\/label><br>\r\n            <input type=\"color\" id=\"linkColorInput\" value=\"#0000ff\"><input type=\"checkbox\" id=\"linkColorCheckbox\"><br>\r\n            <label for=\"regionBgInput\">Region tag background color:<\/label><br>\r\n            <input type=\"color\" id=\"regionBgInput\" value=\"#ffffff\"><input type=\"checkbox\" id=\"regionBgCheckbox\"><br>\r\n            <label for=\"regionTextColorInput\">Region tag text color:<\/label><br>\r\n            <input type=\"color\" id=\"regionTextColorInput\" value=\"#000000\"><input type=\"checkbox\" id=\"regionTextColorCheckbox\"><br>\r\n        <\/div>\r\n    <\/div>\r\n    <br><br>\r\n<p style=\"width: 50%; margin: auto;\">    \r\n<button type=\"button\" onclick=\"updateIFrame()\" style=\"font-size: 26px;\">Regenerate i-frame<\/button>\r\n<\/p>\r\n<\/form>\r\n\r\n\r\n<div id=\"iframeContainer\"><\/div>\r\n\r\n<h2>Generated iFrame code:<\/h2>\r\n\r\n<p>\r\n<textarea id=\"iframeCode\" rows=\"5\" cols=\"100\" readonly><\/textarea><br>\r\n<button onclick=\"copyToClipboard()\">Copy Source Code<\/button>\r\n<\/p>\r\n\r\n\r\n<script type=\"text\/javascript\">\r\nwindow.onload = function(){  \r\n    updateIFrame();\r\n}\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"<p>Here you can create your individual Openki iframe to blend in with the style of your webpage.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":149,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.openki.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":52,"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":195,"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/195"}],"up":[{"embeddable":true,"href":"https:\/\/howto.openki.net\/index.php?rest_route=\/wp\/v2\/pages\/149"}],"wp:attachment":[{"href":"https:\/\/howto.openki.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}