Sunday, October 28, 2018

FullCalendar, the Event Calendar

Purpose:


Recently, clients want us to implement a calendar which support event functionality. After researching, we found that FullCalendar is very suitable.



 FullCalendar is open source and support drag-and-drop events functionality.



The document is well defined and the APIs are easy to use.

It also supports various views such as month, week, day, agenda and list view to fit clients' requirement.



Below is a simple example.

1. define HTML element

2. Initialize FullCalender with options
    Note: "evts" is the list of events including the title and event date


3. Result

Monday, October 15, 2018

Quill Rich Text Editor

Purpose:

Sometimes, clients may require us to provide a panel which can allow them to input some information in admin side. After that, we will display that input data in user side with the proper format.

But, they might frequently contact us for the changes of content or styling.

If the input UI we provided for them is powerful enough, things will get easier. They can input the content with styling by themselves. Then, in our part, we just display that formatted content to the user side. That is the win-win situation. We save our time, and clients get more control for the content input.


Quill is free and open source. And it has well-down documentations. It is easy to use it.


Let’s take a look for a simple implementation to know how to get the content of quill editor and set it back.


1. First, initialize quill




2. Then the quill rich text area will be generated with the theme “snow”.



3. If we input something and format it through toolbars, then we can see the special format of quill to understand how quill handle it.






4. Actually, we can convert it to string format and store it to our database




5. Then, if we want to display it to quill editor, we just convert it back to object and use quill API to set it to the editor’s content. Then, magic is happened.




6. In the end, you can see that the stored formatted context can be displayed properly on quill editor.