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

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.

 

 

Switching fullCalendar views

This is the javascript to add buttons for the month, week and daily views:

JavaScript (fc-more-views.js)

$(document).ready(function() {
    var $calendar = $("#calendar").fullCalendar(
            {  // Start of options
                header: {
                    left:   'title',
                    center: '',
                    right:  'today,month,agendaDay,agendaWeek prev,next'
                }  // End of options
            }
        );
    }
);

HTML (fc-more-views.html)

<html>
    <head>
        <title>Using fullCalendar</title>
        	<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>
        

<style>
        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            }
            
        .centered {
            text-align: center;
        }
        
        </style>

    </head>

<body>


<h1 class="centered">Different views of fullCalendar</h1>





<div id="calendar"></div>



<script src="fc-more-views.js"></script>

</body>
</html>

These are the available views now:

fullCalendar basic display

This sample has just enough code to have a working fullCalendar instance.

JavaScript (fcbasic.js)


$(document).ready(function() {
    var $calendar = $(&amp;amp;amp;quot;#calendar&amp;amp;amp;quot;).fullCalendar();
};

HTML page (fcbasic.html)

<html>
    <head>
        <title>Using fullCalendar</title>
        <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>
        
        <style>
        #calendar {
            width: 80%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            }
            
        .centered {
            text-align: center;
        }
        
        </style>
    </head>

<body>
<h1 class="centered">A basic instance of fullCalendar</h1>

<div id="calendar"></div>

<script src="fcbasic.js"></script>

</body>
</html>

This gives us a month view calendar with simple navigation and plain appearance:

fcbasic