New version soon: fullCalendar with datepickers and event filtering

I am currently adding to the book two examples showing how to interact with fullCalendar using widgets such as datepickers or checkboxes. These are the examples:

fc-interact-datepicker

 

 

fc-events-visibility

The price will increase again in a few days when I publish this version.  This version is already published.  As always, previous buyers will not be affected by this and will receive these updates at no additional cost.

You can take advantage of the current price if you get the book now.

Thanks for your support.

 

Advertisements

fullCalendar integration with a few frameworks

Here are some links to libraries, components and tutorials that show how to integrate fullCalendar with different JavaScript and web frameworks:

Yii2

yii2fullcalendar component –  simple component exposing fullCalendar’s model. Seems to be based on fullCalendar 2.2.3

Ruby On Rails

FullCalendar Events and Scheduling – this is a screencast based on version 2.9.1 of fullCalendar. Shows how to use dialogs and a date range picker.

Web2py

The book contains a Web2py application showing how you could integrate fullCalendar with the framework.

Flask

flask-fullcalendar – Example of a simple integration with flask. I included a different example with the book.

Laravel

Laravel fullCalendar component – a component to integrate fullCalendar in Laravel projects.

Vue.js

Vue fullCalendar component –  sample code to integrate fullCalendar with the Vue.js framework.

AngularJS

Fullcalendar Walk through with AngularJS – blog post showing a very simple integration with AngularJS.

ReactJS

FullCallendar with React and ES6 – sample code showing how to load fullCalendar as a component in ReactJS.

Most of these examples will give you the basics of integrating fullCalendar in your projects. After that very important step, you can use the examples in the book to customize its use.

Dragging fullCalendar external events with variable duration

I just did for a client’s project something like what is shown in the following animation:

fullCalendar-external-events-variable-duration

I will include the code and explanations in the book in the following days.

Sometime in the next two weeks I will raise the introductory price a little to account for the increase in advanced material.  Meanwhile you can still  get the book at the early adopters price.

 

fullCalendar set duration and color on drag and drop of external events

This is for a client’s project but I will include it in the book:

fullCalendar-drag-drop

The events adopt the color of external events dropped on the calendar and adjust their duration according to a custom “data-*” attribute of the dropped element.

More about the book …

Book update:Background Images in fullCalendar

Added code to the book showing how to insert a background image to the calendar and a day slot.  Some jQuery operations required. The code takes into consideration each view and adjusts the background image properties accordingly.  Some screenshots:

 

If you already bought the book, you will receive the update for free.

 

 

Creating a fullCalendar event interactively

The following sample code will allow us to ask for a title for an event, create the event and then store it in the `fullCalendar` internal array of events.  By setting the stick property to true you can navigate away from the day of the event to other month, week or year and it will be kept in memory, unless you refresh the page:

 

// Create calendar when document is ready
$(document).ready(function() {

 // We will refer to $calendar in future code
 var $calendar = $("#calendar").fullCalendar({
   // Start of calendar options
   header: {
    left: 'title',
    right: 'today,month,agendaDay,agendaWeek prev,next'
   },

   // Make possible to respond to clicks and selections
   selectable: true,

   // This is the callback that will be triggered when a selection is made.
   // It gets start and end date/time as part of its arguments
   select: function(start, end, jsEvent, view) {

     // Ask for a title. If empty it will default to "New event"
     var title = prompt("Enter a title for this event", "New event");

     // If did not pressed Cancel button
     if (title != null) {
      // Create event
      var event = {
       title: title.trim() != "" ? title : "New event",
       start: start,
       end: end
      };

      // Push event into fullCalendar's array of events
      // and displays it. The last argument is the
      // "stick" value. If set to true the event
      // will "stick" even after you move to other
      // year, month, day or week.

      $calendar.fullCalendar("renderEvent", event, true);
     };
     // Whatever happens, unselect selection
     $calendar.fullCalendar("unselect");

    }, // End select callback

    // Make events editable, globally
    editable : true,

    // Callback triggered when we click on an event

    eventClick: function(event, jsEvent, view){
     // Ask for a title. If empty it will default to "New event"
     var newTitle = prompt("Enter a new title for this event", event.title);

     // If did not pressed Cancel button
     if (newTitle != null) {
          // Update event
          event.title = newTitle.trim() != "" ? newTitle : event.title;

          // Call the "updateEvent" method
          $calendar.fullCalendar("updateEvent", event);

        }
    } // End callback eventClick
  } // End of calendar options
 );
});

And here the screenshots:

Changing the language of the calendar

fullCalendar provides good support for internationalization. We can change the locale of our calendars and display dates and times according to different international regions. There are 52 language files distributed with fullCalendar in the folder “lang“:

ar.js, ar-ma.js, ar-sa.js, ar-tn.js, bg.js, ca.js, cs.js, da.js,
de-at.js, de.js, el.js, en-au.js, en-ca.js, en-gb.js, en-ie.js,
en-nz.js, es.js, fa.js, fi.js, fr-ca.js, fr-ch.js, fr.js, he.js,
hi.js, hr.js, hu.js, id.js,is.js, it.js, ja.js, ko.js, lt.js, lv.js,
nb.js, nl.js, pl.js, pt-br.js, pt.js, ro.js, ru.js, sk.js, sl.js,
sr-cyrl.js, sr.js, sv.js, th.js, tr.js, uk.js, vi.js, zh-cn.js, zh-tw.js

For this example we will change the locale to Spanish (“es”). The change only needs to happen in the HTML page. What we need to do is to include the language files for fullCalendar in the appropriate order:

<!-- Spanish language file loaded after fullcalendar.js -->
<script src='fullcalendar/lang/es.js'></script>

To display correctly all international characters when changing locales it is important that the page charset be declared UTF-8. That is why we have this meta tag on top of every HTML page:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

The calendar looks like this in Spanish:

fc-locale-1fc-locale-2

This is th e full HTML:

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Using fullCalendar</title>

    <!-- 
        All CSS and JS files needed for fullCalendar. Change you
        files locations accordingly.        
        -->

    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
    <script src='fullcalendar/lib/jquery.min.js'></script>
    <script src='fullcalendar/lib/moment.min.js'></script>
    <script src='fullcalendar/fullcalendar.js'></script>

    <!-- fullCalendar spanish language file loaded after fullcalendar.js -->
    <script src='fullcalendar/lang/es.js'></script>

    <!-- Some styles for the calendar and other elements -->
    <style>
        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        
        .centered {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1 class="centered">Calendar using locale "es-ES" Spanish)</h1>

    <!-- The calendar container -->
    <div id="calendar"></div>

    <!-- Calendar creation script -->
    <script src="fc-locale.js"></script>

</body>

</html>