In this post we’d like to share the instructions that will help you to use dhtmlxGantt with Firebase. For this we developed a special adapter that you’re welcome to download from github.

Firebase is a powerful platform that provides API for data storage and real-time synchronization, and the server where the data is stored. Moreover, it includes user authentication, static hosting, and more.

Firebase adapter for dhtmlxGantt: what for?

Some time ago real-time sync of web apps was a cool feature, but today it’s a must-have. The changes that are made in the app will be synced to all clients: both to the connected users in real-time and to those who are offline (data is synchronized instantly when your app regains connectivity). So, all the changes made to the Gantt Chart in your application will be transfered to clients working with your app.

How to use

Step 1. First af all, we need to include dhtmlxGantt and Firebase files on the page.

Download dhtmlxGantt
Download Firebase adapter for Gantt

Step 2. The next step is to create html for dhtmlxGantt:

Step 3. Now we init dhtmlxGantt:

Step 4. Create firebase connection and set this to the gantt.

Note: we used our test base. Your need to create your own base on firebase.com and use your URL.

Well, that’s all we need to start using dhtmlxGantt on FireBase Platform. If you have any questions/comments, you’re welcome to leave them below.

Thanks for reading!

We decided to start publishing season infographic with the most important news that you might have missed. This time we collected all the news, tutorials and announcements that we had in June – August, 2015. You may find full list and links to all of them below.

In short, our JavaScript UI library was updated twice – we released dhtmlxSuite 4.3 and dhtmlxSuite 4.4; we also released dhtmlxGantt 3.3 with usual long list of new features; updated PHP connector and added Laravel support; shared two useful integrations with detailed guidances – dhtmlxScheduler with MeteorJS and dhtmlxGantt with FireBase.

Updates:

dhtmlxSuite 4.3: Carousel, Sidebar with Bubbles, Range Slider and More

dhtmlxSuite 4.4 with Support of MS Edge and Updated Skin Builder

dhtmlxGantt 3.3: Auto scheduling, Fullscreen Mode and More

Updated PHP Connector and Laravel Support Added

Tutorials:

How to Use dhtmlxScheduler in MeteorJS Based Apps

How to Use DHTMLX Gantt Chart with FireBase Platform

Other news:

DHTMLX Suite 4.4 Beta is Available

Support of dhtmlxSuite 3.6 and Old Browsers Can Be Stopped [Poll]

Gantt, Scheduler and Suite Documentation is Available in PDF

Thanks for reading and stay tuned!

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 meet Firebase, then you should know that it provides a realtime 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.

dhtmlxScheduler + Firebase = … ?

… Dynamic Event 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.

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’d also like to share here.

How to use

Step 1. We begin with including dhtmlxScheduler and Firebase files on the page:

Download dhtmlxScheduler
Download Firebase adapter for Scheduler

Step 2. In this step we create html for dhtmlxScheduler:

Step 3. Now it’s time to init dhtmlxScheduler:

Step 4. And the final step is to create firebase connection and set this to scheduler:

Note: we used our test base. Your need to create your own base on firebase.com and use your URL.

These simple 4 steps show you how to add Event Calendar to your Firebase application. Don’t hesitate to share your opinion in the comment section below.

Thanks for reading!

In this tutorial we’d like to show you how to use our event calendar, dhtmlxScheduler, with Ruby on Rails, a web application framework written in Ruby. The tutorial consists of two parts: firstly, we’ll create a simple scheduler with data saving and loading, the second part is adding recurring events to it. Let’s start.

Creating a scheduler

Step 1. The first thing we need to do is to create a new project. For this we need to run the next command:

Step 2. After that create a home controller:

Step 3. Open config/routes.rb and replace

with

When it’s done, check the server performance with the following command:

When you open http://localhost:3000/ in browser, you should get this page:

Step 4. Finished with these settings, we’ll proceed to Scheduler component. So, the next step is to download dhtmlxScheduler.

The following files unpack to vendor/assets/javascripts/:

codebase/dhtmlxscheduler.js
codebase/ext
codebase/locale

These files to vendor/assets/stylesheets/:

codebase/dhtmlxscheduler.css
codebase/dhtmlxscheduler_classic.css
codebase/dhtmlxscheduler_flat.css
codebase/dhtmlxscheduler_glossy.css

Then we need to create “assets” folder in the “public” directory and unpack the following files to it:

codebase/imgs
codebase/imgs_dhx_terrace
codebase/imgs_flat
codebase/imgs_glossy

Open config/initializers/assets.rb. We need to add the style sheet and dhtmlxscheduler.js file to the precompile array.

For this, add the next lines to this file:

Step 5. Open app/views/layouts/application.html.erb. This file is a template for all the pages that have common elements.

Here we include dhtmlxscheduler.js and dhtmlxscheduler.css

Step 6. In this step we open app/views/home/index.html.erb, the file that is used for a view for our home controller. It will display the scheduler.

Now we add a container for scheduler, and then initialize our event calendar:

If we run the server now, we should get our scheduler.

Step 7. Well, dhtmlxSheduler is initialized and we may proceed to further settings. Let’s create a model for an event. For this, run the following command:

To create a database, run this:

Step 8. The database is created, but let’s check it and add a record. For this, run:

And add some sample record:

To display all the records, we need to run this command:

For exit we use “exit” command.

Step 9. Now we open config/routes.rb and add the route for data loading:

Step 10. Open app/controllers/home_controller.rb and add “data” action to the controller:

Step 11. In this step we open app/views/home/index.html.erb for adding data loading from the server. It’s important to set scheduler.config.xml_date for correct dates parsing.

If everything is done correctly, the data loading should be successful.

Step 12. We continue with opening config/routes.rb for adding a route for data handling:

Step 13. Open app/controllers/home_controller.rb. Add “db_action” action to the controller:

Step 14. To save the changes in scheduler we need to use DataProcessor. Open app/views/home/index.html.erb.

Add dataProcessor:

As a result we should have:

But if you’d like to use POST requests for changing the data in the database, you need to specify Transaction Mode dataProcessor = POST. Moreover, you need to change the corresponding route to:

And you need to open app/controllers/application_controller.rb and set

instead of

Step 15. Finally we’re ready to check our results. So, run the server:

Well, this is everything you need to start using dhtmlxScheduler with Ruby on Rails. The second part of our tutorial that will show you how to set recurring events in dhtmlxScheduler with RoR will be released in a week. Stay tuned!

In case you’re looking for a JavaScript library for creating responsive web applications with less efforts, we have great news for you! dhtmlxSuite 4.5 update brings you a sidebar navigation drawer – a very convenient three-line menu feature that is widely used in the majority of mobile/tablet apps. Moreover, you now have the opportunity to learn and test our new demo application, that will serve you as a good example for getting know how to develop responsive web applications with DHTMLX.

Apart from it, we have a new component, several new features and many bug fixes and small improvements. So, here is a summary for you.

New responsive demo – apps for desktop, tablet and mobile

We invite you to check DHTMLX CRM demo application. You may open it on different devices and see how it works (use QR code below for mobiles and tablets). This example shows that by using the basic functionality of dhtmlx components, you can create fully responsive web applications.

Open the demo on tablet and mobile

dhtmlxList control

New component is here! Meet dhtmlxList, a JavaScript UI control for displaying items in a list view. List comes with a range of the most useful features – filtering, sorting, drag-and-drop, paging, and more.

Check the live demo on its page and other samples.

Sidebar Drawer

dhtmlxSidebar got a new feature: it can hide and expand by clicking on a three-line menu button. Sidebar Drawer can save the space on your mobile/tablet app, you can add animation to it to customize the way of sliding and appearing of the menu items in the Sidebar. Check demo

Images in dhtmlxForm

Since 4.5, you may insert images in the form – a new item type is added for this purpose. Check demo

Full what’s new list can be found here. You’re welcome to download the Standard Edition of the library here.

PRO users will receive the link via email.

Feel free to leave your comments below! You may ask us “Where is dhtmlxPortal?” Well, sorry for this delay. It’s on its way, and will be released asap.

Stay tuned!

After recently updated dhtmlxSuite, it’s a high time to release a new version of dhtmlxGantt. The upcoming version is going to be an important update, otherwise it won’t be 4.0. dhtmlxGantt 4.0 will be released in 2 weeks, but we invite you to discover what to expect right now.

Updated 12-Nov-2015: Sorry for the delay, we found several difficulties at the stage of testing. Team is working hard on new version. Thank you for your patience.

Gantt chart becomes faster

Our aim is to eliminate performance issues when rendering big amount of tasks, so you’ll be able to work with more than 500-1000 tasks without any problems.

New functionality

Surely, apart from the big improvements that are made with the performance, you’ll receive several new features: undo-redo functionality, public interfaces for grid and timeline, the ability to use custom Grid component instead of default one, and more.

Here you may find other plans and vote for the most useful features in order we could see what’s important for you.

If you haven’t met dhtmlxGantt yet, you’re welcome to try this Gantt Chart library and start waiting for a new version with us.

Now you’re aware of upcoming update, so be ready for upgrading your versions. Follow our news on twitter, facebook and google+ to be the first to know about the release.

Recently we’ve shared the detailed tutorial that explains how to use our event calendar with Ruby on Rails. As promised, today we share the second part of this guide – you’ll be able to add recurring events to your calendar.

Before we start, please follow the instructions described here to prepare your scheduler for the further steps. When finished, you may proceed with adding recurring events:

Step 1. For recurring events we need three additional fields:

- rec_type (stores recurring logic);
- event_pid (parent ID of a series of events);
- event_length (a real length of a series of events).

Also we need to remove the old model. For this we run the following:

Step 2. Use the following command to create a new model:

Step 3. Remove the events table from the database or remove db/development.sqlite3.

After that we need to run a migration:

Step 4. Open app/controllers/home_controller.rb

Here we change “db_action” action and “data” for saving and loading of recurring events:

Step 5. Open config/initializers/assets.rb and add dhtmlxscheduler_recurring extension to the precompile array.

For this we need to add this line:

Step 6. Open views/layouts/application.html.erb and include dhtmlxscheduler_recurring.js extension.

Final Step 7. Well, we need to run the server once again to check our scheduler with recurring events:

If you follow the given instructions, you should now have a ready-to-use scheduler with recurring events that perfectly works with Rails framework. As you can see, there isn’t much code and integration with this framework is performed quite easy. Apart from the described features, dhtmlxScheduler has very extended functionality, and it won’t be difficult to create a full-featured event calendar that will work with Ruby on Rails.

You’re welcome to leave your comments and ask questions.

We decided to start a very good practice – we share our plans of dhtmlxSuite development in order you could be aware of what to expect. Moreover, we’d like you to take a part in this planning. In this post you’ll get know the near future of our library and learn how to influence on it.

Moving forward

Our principle #1 – never underestimate the rate of technologies development. We are always trying to move with the time: our controls support modern browsers and new devices; they correspond to the nowadays web development techniques and design. So the priority #1 is to guarantee the steady work of Suite UI controls.

Suite 5.0

The next version of dhtmlxSuite is going to be a major update. We’re planning to roll out 5.0 with a set of important and helpful updates. Here are some of them:

– DHTMLX Framework

dhtmlxSuite library has already proven itself as powerful library for building web applications. And now we set another goal – we want to tell you how to achieve the highest results by yourself, how to create really professional and fast applications with DHTMLX, how to work with DHTMLX in general. For this purpose we’ll share a set of “How-To’s” that will contain best practices and correct work with our controls.

– Visual Designer

We know that it’s time to update our Visual Designer to provide you the ability of interface prototyping in more fast and convenient way. New designer will be fully updated, get form builder tool and drag-and-drop functionality. It concerns both online and desktop versions.

– New Tree Control

In addition to the existing dhtmlxTree component we are preparing to release a new one. New Tree will be much faster, and will include the basic set of features at the beginning.

Feature requests

We’d also like to present you a public roadmap where you may check all our plans for future versions. Here is a Trello board with Suite roadmap. You may see that we’ve highlighted the updates that are planned to be a part of dhtmlxSuite 5.0. “Plans” label means that we’re going to release this feature anyway though we have no concrete dates. “Wishes” label means your feature requests that we grab from our forum, emails, support or other sources.

How to influence on it?

Vote for the features, demos, tutorials that you’d like to see in our library. If we see that some of the plans/wishes collect many votes, we’ll try to implement it in near release. The most demanded features surely will appear in dhtmlxSuite.

You have probably noticed that some of the plans are not connected with Suite update, so they can be released at any time. Moreover, the board contains dhtmlxVault roadmap as it often used together with dhtmlxSuite.

Thanks

Thank you all for your suggestions and for your requests to make this roadmap as well. With your active participation and feedbacks, dhtmlxSuite library develops and will improve. We hope that the transparency of our plans will make our relationships stronger!

As a follow-up to our news about DHTMLX Suite roadmap, we’d like to tell you how your suggestions can appear in new versions or on our public roadmap. It concerns not only dhtmlxSuite, but dhtmlxGantt, dhtmlxScheduler, dhtmlxVault and other components. So, do you have something to suggest?

If yes, here are the ways to do this:

Thank you for your help in improving DHTMLX products! Even our recent voting showed Today button in Calendar should appear as soon as possible :) Stay tuned!

Our dhtmlxScheduler provides you with the different types of data visualization. Besides the popular options, such as different time scales like day or week, our scheduler gives you some additional possibilities. For example, you can combine your schedule with the map that can be pretty helpful in case you want to plan your business trip or vacations.

If you’re working with ASP.NET, you may look at DHTMLX Scheduler.NET, a Scheduler control that works both in ASP.NET MVC and Web Forms. It has the similar range of views that are described below.

Usually, there are only three required steps that allow you to use the view you want:

1. Include the required files to your project
2. Add the proper tab to your page, so you can switch to the view you want
3. Configure the view

To understand how the views work, let’s start with the default ones.

Default Views: Day, Week, and Month

This Getting Started Guide can help you build the basic scheduler.

As we mentioned before, you should add the proper files firstly:

And here’s a bunch of DIV containers you should use to make your application work:

This code creates Next and Previous navigation buttons, shows you the current period, etc.

Particularly, we’re interested in these three DIV’s:

We’ve created three tabs that can be used to switch between the Day, Week, and Month views.

During the initialization you can set the default options: an HTML container your calendar will be initialized in, the initial date of the scheduler, and the name of the initial view:

Here’s how the typical basic scheduler looks like:

As you can see, there are some previously created events rendered.

You can use tabs to switch between the available views. Here’s the Week view:

And here’s how the Day View looks like:

You can double-click an empty cell to create a new event or drag the existing event through the calendar grid to change the date.

Learn more: Day View, Week View, Month View.

Extending the Period. The Year View

If one month is not long enough to plan your schedule, there’s always a possibility to use the Year View.

First of all, you should include the required JavaScript file:

Then, add the proper tab to your page:

And finally, set the label for the tab:

That’s it. Now you can use the Year View:

The tooltip you can see at the screenshot above allows you to edit the event. Just click the “Details” icon and the edit window will appear on the screen.

Learn more: Year View Documentation Page.

All at Once. Agenda, Week Agenda, and Grid

Now, let’s talk about the views that allow you to see all available events in the form of different types of lists.

The Agenda view displays a list of all upcoming events. To enable this view you should add the proper JavaScript to your project:

The next step is to add the tab to your page:

As a result, you’ll get a list that contains all your tasks:

You can double-click on an empty self of this list to create a new event or click the “Details” button to edit the existing ones.

Learn more: Agenda View Documentation Page

The Week Agenda view is a combination of two views: Week and Agenda. This view shows you a list of upcoming events within a week.

Here’s the required JavaScript file:

And here’s the code that adds the proper tab:

The result is shown below:

As you can see, this view shows you the whole week at once. You can double-click the empty cell to create a new event. Double-clicking the existing event will open the edit window. Another handy feature is events highlighting. You can click the event to select it. After you select the long term event, all related records will be highlighted.

Here’s how it looks like:

Learn more: Week Agenda View Documentation Page

The Grid View looks similar to the Agenda view. But in this case, you can choose the data you want to display.

Imagine that you wish to add some comments to your calendar. Here’s how the possible array of events will look like:

Let’s add the Grid view to our application. First of all, the required file:

Now you should add the Grid tab:

Configure the date format and change the tab label if you want to:

Now, the most important part. We must configure the grid. You should call the createGridView method to do so:

Here’s an explanation of what we’ve done. This code will create new grid with name grid that will contain a bunch of columns that the fields property contains. In this case, we have used the id property to choose what data we you want to display. It can be the ID of the event, its beginning date, or even a comment that you’ve added. The second property in our example is label. It defines the label for the column. The last property, sort, specifies the type of content that will be displayed in this column. It specifies the way of sorting. Possible values are ind, date, and str.

The result is shown below:

Besides this minimal amount of properties, many others can help you configure your application the way you want. You can set the with of a column, choose the date range, use custom sorting functions, etc.

Learn more: Grid View Documentation Page

Timeline View and Units View

These views allow you to visualize events horizontally with separate timelines arranged from left to right (Timeline View) or vertically

Let’s start from the Timeline View.

Add the proper JavaScript file:

Then add the tab to your page:

and set its label:

Now you can call the createTimelineView method to configure the view

It’s big enough but have no fear. Check the comments. To help you better understand what’s going on here’s little explanation. Besides the X-Axis configuration, you should also define the x-unit property that defines how many areas your calendar will consist of. In this example above we’ve created four areas with labels Section A, Section B, etc. The render property defines the view mode. There are Bar, Cell, Tree, and Days options available. The y_property property will help you attach an event to a proper timeline area. For example, if you want to add an event to Section A you should add the following property: y_property: “1″.

Learn more: Timeline View Documentation Page

The Units View looks pretty much the same. The main difference, in this case, is that you can configure the X-Axis.

By tradition, add the JavaScript file:

and add the tab to your page:

You can use this code to set the label fir the tab:

To configure how the X-Axis will look like, you should use the createUnitsView method:

This code will create a new view with name units. property defines the property name that can be used to define which unit will contain the proper event. The list array contains the key property that you should use to attach the event to the unit, and the label property that defines unit’s label.

That’s all you need to do for the basic configuration. The final step is to change the way you define your event. All you need to do is to add new property that will define which unit this event belongs. For example:

In this case, unit_id: “1″ means that the first event will be placed within the unit with the key: 1 property.

Here’s how this view looks like:

Besides this very basic functionality, Units View allows you to assign events to several units, or, for example, display units for multiple days. Better check the documentation page to learn how you can configure it.

Learn more: Units View Documentation Page

Map View

If you travel a lot, this view will be pretty helpful, since it provides you with possibility to combine the event description wit the marker on the map. This view uses Google Maps, so this time besides the Map View JavaScript file, we should include the required Google Maps file:

Don’t forget to add the Map view tab to your page:

And remember that it’s alway possible to rename it:

The next step is Lightbox configuration. Lightbox is an edit form used to alter the event’s details. Here’s how it looks like by default:

As you can see, there’s no possibility to specify the location. Let’s fix it:

Done. Now you able to add the location information to your events.

Here’s how the Map view works:

There are two areas: a list of upcoming events and Google Map that shows the event’s location. To create a new event, you can double click on an empty cell of the list or the desired location on the map:

After you create the event, it will appear on the list, and a new marker will be added to the map. You can click on the ‘details’ icon on the left side of the event’s description to edit or delete it. To overview the event, click the marker:

Learn more: Map View Documentation Page

dhtmlxScheduler is a JavaScript Schedule Calendar that gives you the ability to develop Google-like event calendar in your application. Using dhtmlxScheduler, you may build agenda, appointment, week calendars, and more others. Get learn about our JavaScript scheduler control in its documentation and start using it now.