Home » Support » Help Articles » Integrating jQuery Based Calendar with PHP

Integrating jQuery Based Calendar with PHP

Back to Help Articles Home


This guide will walk you through integrating jQuery based calendar in PHP and HTML.

Basic Usage

  1. Download the full calendar from http://arshaw.com/fullcalendar/download/
  2. Include the following fullcalendar.css file in the head section of the HTML page.

    <link rel='stylesheet' type='text/css' href='fullcalendar.css' />

  3. Include the following .js files in the head section of your HTML page.

    3.1. jquery-1.9.1.min.js
    <script src='jquery/jquery-1.9.1.min.js'></script>

    3.2. jquery-ui-1.10.2.custom.min.js
    <script src='jquery/jquery-ui-1.10.2.custom.min.js'></script>

    3.3. fullcalendar.min.js
    <script src='fullcalendar/fullcalendar.min.js'></script>

  4. To initialize the calendar include the following jQuery code within the <script> tag in the head section of your HTML page. The code depends on the id of calendar which is included in body tag of HTML.
    <script type=”text/javascript”>
    $(document).ready(function() {
    $('#calendar').fullCalendar({
    })
    });
    </script>
  5. Include the calendar within the body tag of your HTML page.
    <body>
    <div id='”calendar”></div>
    </body>

General Display and Terms Used in Calendar

  1. To display header in the calendar the header option must be set true.
  2. The calendar object has properties left, right and center separated by comma or space. Values separated by comma shall be displayed adjacently while vales separated by space shall be displayed with a small gap in between.
  3. The following terms or strings are used in calendar:
    3.1. title: The text to appear in calendar for current day, current month and current year.
    3.2. prev: Button to shift calendar display back by one month, one week or one day.
    3.3. next: Button to shift calendar display ahead by one month, one week or one day.
    3.4. today: Button to shift calendar to current date, current month or current week.
    3.5. start: The day when event gets started.
    3.6. end: The day when event gets ended.
    3.7. url: Link given on the title. Clicking this link shall redirect the user to the target page.

JavaScript Code

  • <script type=”text/javascript”>
    $(document).ready(function() {
    $('#calendar').fullCalendar({
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
    },
    editable: true,
    events: [
    {
    title: 'Long Event',
    start: new Date(y, m, d-5),
    end: new Date(y, m, d-2)
    },
    ]
    });
    });
    </script>

Customising Calendar with PHP

CASE: Let us suppose that we have an application where we can add our task or event for a particular date and we want the title of task to be displayed on the calendar on that particular date. Clicking the title should redirect the user to the task details page. Every task and events should get stored in database.

Steps

  1. In your class file write a mysql function to insert task details into the database. The task details should include task title, task description and date.

    function addTask()
    {
    $sQry = "INSERT INTO app_task SET task_title = :task_title, task_details = :task_details, task_date = :task_date";
    $oStmt = $this->DB->prepare($sQry);
    $oStmt->bindParam(':task_title', $_POST['txtTaskName']);
    $oStmt->bindParam(':task_details', $_POST['taTaskDetails']);
    $oStmt->bindParam(':task_date', $sDate);
    $oStmt->execute();
    }
  2. In the same class write another mysql function to retrieve all the task added by user.

    function getAllTask()
    {
    $sSelectQry = "SELECT * FROM app_task";
    $oStmt = $this->DB->prepare($sSelectQry);
    $oStmt->execute();
    $aTaskDetails = $oStmt->fetchAll();
    return $aTaskDetails;
    }
  3. Call the select function in the html file where calendar is integrated. Let us suppose that the class in which mysql function is written is task.cls.php. Initialize the class file and call the select function.

    $oTask = new task();
    $aTaskDetails = $oTask->getAllTask();
    $iMaxTask = count($aTaskDetails);

  4. Include the following code within the <script> tags where the calendar object is initialized.

    <script type=”text/javascript”>
    $(document).ready(function() {
    var date = new Date();
    var d = date.getDate(); //javscript function to get current date
    var m = date.getMonth(); //javascript function to get current month
    var y = date.getFullYear(); // javascript function to get current year
    $('#calendar').fullCalendar({ //Calendar object initialized
    header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
    },
    editable: true,
    events: [
    <?php
    for($i=0;$i<$iMaxTask;$i++){
    $sToDay = mktime(0, 0, 0, date("m") , date("j"), date("Y")); //Current date
    $sTaskDate = strtotime($aAllTasks[$i]['task_date']); // Date of task
    $sDiff = ($sToDay - $sTaskDate)/(24*3600); //Difference in days between current date and task date
    ?>
    {
    title: '<?php print $aAllTasks[$i]['task_title'];?>',
    start: new Date(y, m, d-(<?php print round($sDiff);?>)),
    end: new Date(y, m, d-(<?php print round($sDiff);?>)),
    url: 'http://abc.com'
    }
    ]
    });
    });
    </script>
  5. Include the following within the body tag of your HTML page.

    <body>
    <div id='”calendar”></div>
    </body>

Figure One



Updated on Nov 11, 2015

The techReview is an online magazine by Batoi and publishes articles on current trends in technologies across different industry verticals and areas of research. The objective of the online magazine to provide an insight into cutting-edge technologies in their evolution from labs to market.

Visit techReview


English - IN (USD)
New Users? Signup.     Existing Users? Login.