Simple jQuery Calendar and Schedule Plugin For Bootstrap - Bic Calendar

Bic Calendar is a lightweight jQuery plugin that enables you to create a simple and nice Calendar & Schedule with ajax event support using twitter bootstrap.

View more

• 50 Best Date And Time Picker jQuery Plugins

See Also:

• jQuery Plugin for World Calendars - calendars
• Full Size and Drag & Drop Calendar Plugin - FullCalendar
• Calendario - Flexibel and Transparent Calendar Plugin

Basic Usage:

1. Include jQuery library and Bic Calendar plugin on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bic_calendar.min.js"></script>
<link href="css/bic_calendar.css" rel="stylesheet" type="text/css">

2. Include twitter bootstrap on the page

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

3. Markup

<div id="demo"></div>

4. The javascript to activate the date picker

mesos = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

dias = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];

$('#demo').bic_calendar({
    nombresMes: mesos,
    dias: dias,
    req_ajax: {
    type: 'get',
    url: 'http://bic.cat/bic_calendar/index.php' // External calls
    }
});

5. The PHP (You'll have to use this for external calls)

header('Access-Control-Allow-Origin: *');

$mes = $_GET['mes'];
$ano = $_GET['ano'];

$array = array(
	array("27/$mes/$ano", 'Getting Contacts Barcelona', 'http://gettingcontacts.com/events/view/barcelona'),
	array("7/$mes/$ano", '2º Getting Contacts Alaquás', 'http://gettingcontacts.com/events/view/alaquas', '#3B4', 'contingut popover'),
	array("17/$mes/$ano", '4º Getting Contacts Barberà', '#', '#3B4', 'contingut popover')
);

echo json_encode($array);

6. All possible plugin options.

$('#demo').bic_calendar({

  // array of event objects
  event: [],

  // the date to display, as a string in dd/MM/YYYY format, or as a Date object
  date: new Date(),

  // day names
  dayNames: ["l", "m", "x", "j", "v", "s", "d"],

  // month names
  monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],

  // shows days
  showDays: true,

  // json array of event array
  reqAjax: [],

  // enable select
  enableSelect: false,

  // multiple select
  multiSelect: false,

  // displays month controller
  displayMonthController: true,

  // displays year controller
  displayYearController: true,

  // Bootstrap popover options
  popoverOptions: {},

  // Bootstrap tooltip options
  tooltipOptions: {}
  
});

Change log:

2014-09-03

• Add date option to start calendar at a user specified date

v3.1.2 (2013-12-16)

• added functionality startWeekDay and docs
• added bic calendar full logic

---

This awesome jQuery plugin is developed by bichotll. For more Advanced Usages, please check the demo page or visit the official website.