{"id":2956,"date":"2015-09-08T17:57:58","date_gmt":"2015-09-08T13:57:58","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2956"},"modified":"2023-05-05T13:37:13","modified_gmt":"2023-05-05T10:37:13","slug":"firebase-adapter-real-time-apps-dhtmlxscheduler","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/firebase-adapter-real-time-apps-dhtmlxscheduler\/","title":{"rendered":"FireBase Adapter for Real-Time Apps with dhtmlxScheduler"},"content":{"rendered":"

Some time ago we shared our first Firebase adapter created for dhtmlxGantt<\/a>. And today we’d like to share the similar one, but for dhtmlxScheduler<\/a>.<\/p>\n

Well, if you still didn’t meet Firebase<\/a>, then you should know that it provides a real-time database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud.<\/p>\n

dhtmlxScheduler + Firebase = \u2026 ?<\/strong><\/h3>\n

<\/p>\n

\"scheduler-firebase-img\"<\/a>
\n
\n\u2026 Dynamic Scheduling Calendar in your app. The changes that were made in your application will be sent to the server and then sync with all users of your app. Those users who are offline will get these changes when their app regains connectivity.<\/p>\n

To start getting advantages from this integration, we offer you to use our Firebase adapter that you may download from Github. The package also includes samples and instructions which we\u2019d also like to share here.<\/p>\n

How to use<\/strong><\/h3>\n

\nStep 1.<\/strong> We begin with including dhtmlxScheduler and Firebase files on the page:<\/p>\n

Download dhtmlxScheduler<\/a>
\nDownload Firebase adapter for Scheduler<\/a><\/p><\/blockquote>\n

<!--<\/span> dhtmlxScheduler --><\/span>
\n<<\/span>script src=<\/span>"..\/source\/dhtmlx_scheduler\/sources\/dhtmlxscheduler.js"<\/span>><\/<\/span>script><\/span>
\n<<\/span>link rel=<\/span>"stylesheet"<\/span> href=<\/span>"..\/source\/dhtmlx_scheduler\/sources\/skins\/dhtmlxscheduler.css"<\/span>><\/span>
\n
\n<!--<\/span> dhtmlxScheduler-<\/span>Firebase adapter --><\/span>
\n<<\/span>script type=<\/span>"text\/javascript"<\/span> src=<\/span>"..\/source\/dhtmlx_scheduler_firebase.js"<\/span>><\/<\/span>script><\/span>
\n
\n<!--<\/span> FireBase --><\/span>
\n<<\/span>script src=<\/span>"https:\/\/cdn.firebase.com\/js\/client\/2.2.4\/firebase.js"<\/span>><\/<\/span>script><\/span><\/div><\/div>\n

\nStep 2.<\/strong> In this step we create html for dhtmlxScheduler:<\/p>\n

    <<\/span>div id=<\/span>"scheduler_here"<\/span> class<\/span>=<\/span>"dhx_cal_container"<\/span> style=<\/span>"width: 100%; height: 500px;"<\/span>><\/span>
\n        <<\/span>div class<\/span>=<\/span>"dhx_cal_navline"<\/span>><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_prev_button"<\/span>>&<\/span>nbsp;<\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_next_button"<\/span>>&<\/span>nbsp;<\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_today_button"<\/span>><\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_date"<\/span>><\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"day_tab"<\/span> style=<\/span>"right: 332px;"<\/span>><\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"week_tab"<\/span> style=<\/span>"right: 268px;"<\/span>><\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"month_tab"<\/span> style=<\/span>"right: 204px;"<\/span>><\/<\/span>div><\/span>
\n            <<\/span>div class<\/span>=<\/span>"dhx_cal_tab"<\/span> name=<\/span>"year_tab"<\/span> style=<\/span>"right: 140px;"<\/span>><\/<\/span>div><\/span>
\n        <\/<\/span>div><\/span>
\n        <<\/span>div class<\/span>=<\/span>"dhx_cal_header"<\/span>><\/<\/span>div><\/span>
\n        <<\/span>div class<\/span>=<\/span>"dhx_cal_data"<\/span>><\/<\/span>div><\/span>
\n    <\/<\/span>div><\/span><\/div><\/div>\n

\nStep 3.<\/strong> Now it’s time to init dhtmlxScheduler:<\/p>\n

scheduler.init<\/span>(<\/span>"scheduler_here"<\/span>)<\/span>;<\/span><\/div><\/div>\n

\nStep 4.<\/strong> And the final step is to create firebase connection and set this to scheduler:<\/p>\n

Note: we used our test base. Your need to create your own base on firebase.com<\/a> and use your URL.<\/p><\/blockquote>\n

    var<\/span> data =<\/span> new<\/span> Firebase(<\/span>"https:\/\/dhtmlxschedulertest.firebaseio.com"<\/span>)<\/span>,<\/span>
\n        events =<\/span> data.child<\/span>(<\/span>"events"<\/span>)<\/span>;<\/span>
\n
\n    scheduler.firebase<\/span>(<\/span>events)<\/span>;<\/span><\/div><\/div>\n

These simple 4 steps show you how to add Scheduler to your Firebase application. Don’t hesitate to share your opinion in the comment section below.<\/p>\n

Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"

Some time ago we shared our first Firebase adapter created for dhtmlxGantt. And today we’d like to share the similar one, but for dhtmlxScheduler. Well, if you still didn’t …<\/p>\n","protected":false},"author":2,"featured_media":3415,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,47,14,15],"class_list":["post-2956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-firebase","tag-tips","tag-dhtmlxscheduler"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2956"}],"version-history":[{"count":3,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2956\/revisions"}],"predecessor-version":[{"id":10678,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2956\/revisions\/10678"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3415"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}