Fork me on GitHub

Dependencias

  • ~jQuery 1.7.2
  • ~Twitter Bootstrap 3.0

Options

events (array of event object)
startWeekDay (int)
default: 0
*1 for english format. Mind the dayNames.
dayNames (array)
default: ["l", "m", "x", "j", "v", "s", "d"]
*Did you change the startWeekDay? Change the order of this days then.
monthNames (array)
default: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
showDays (boolean)
default: true
reqAjax (json array of event array)
- reqAjax.type (string) {'get', 'post'}
- reqAjax.url (string)
enableSelect (boolean)
default: false
multiSelect (boolean)
default: false
displayMonthController (boolean)
default: true
displayYearController (boolean)
default: true
popoverOptions (popover Twitter Bootstrap object)
tooltipOptions (tooltip Twitter Bootstrap object)

Event object

date(string):
ex: "17/8/1989"
title (string)
ex: "Event Barberà"
link (string)
ex: "http://google.es"
color(string)
ex: "#333"
class (string)
ex: "activo congreso"
content (string)
ex: "Text for the content of popover...description of event...image..."
* if content is not defined it will be a tooltip

Event bicCalendarSelect

Response:

detail.dateFirst
12/26/1989
detail.dateLast
12/12/1992

Example code:

document.addEventListener('bicCalendarSelect', function(e) {
    moment.lang('es'); // default the language to English
    var dateFirst = new moment(e.detail.dateFirst);
    var dateLast = new moment(e.detail.dateLast);

    $('#from-day').val(dateFirst.format('LL'));
    $('#to-day').val(dateLast.format('LL'));

});

Showcase

http://gettingcontacts.com

BIC Calendar


ca - BIC Calendar es un simple calendari per marcar esdeveniments. Un plugin de jQuery i Twitter Bootstrap.

en - BIC Calendar is a simple calendar to mark events, a jQuery plugin and Twitter Bootstrap.

Example events select with moment.js:

Calendar code:

$(document).ready(function() {

    var monthNames = ["Gener", "Febrer", "Març", "Abril", "Maig", "Juny", "Juliol", "Agost", "Setembre", "Octubre", "Novembre", "Dicembre"];

    var dayNames = ["L", "M", "M", "J", "V", "S", "D"];

    var events = [
        {
            date: "28/12/2013",
            title: 'SPORT & WELLNESS',
            link: 'http://bic.cat',
            linkTarget: '_blank',
            color: '',
            content: '<\img src="http://gettingcontacts.com/upload/jornadas/sport-wellness_portada.png" ><\br>06-11-2013 - 09:00 <\br> Tecnocampus Mataró Auditori',
            class: '',
            displayMonthController: true,
            displayYearController: true,
            nMonths: 6
        }
    ];

    $('#events-calendar').bic_calendar({
        //list of events in array
        events: events,
        //enable select
        enableSelect: true,
        //enable multi-select
        multiSelect: true,
        //set day names
        dayNames: dayNames,
        //set month names
        monthNames: monthNames,
        //show dayNames
        showDays: true,
        //show month controller
        displayMonthController: true,
        //show year controller
        displayYearController: true,
        //set ajax call
        reqAjax: {
            type: 'get',
            url: 'http://bic.cat/bic_calendar/index.php'
        }
    });
});

Form code:

$(document).ready(function() {
    document.addEventListener('bicCalendarSelect', function(e) {
        moment.lang('es'); // default the language to English
        var dateFirst = new moment(e.detail.dateFirst);
        var dateLast = new moment(e.detail.dateLast);

        $('#from-day').val(dateFirst.format('LL'));
        $('#to-day').val(dateLast.format('LL'));

        /*
         * more about moment.js
         * http://momentjs.com/docs/#/displaying/
         */
    });
});

Calendar code

$(document).ready(function() {

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

    var dayNames = ["S", "M", "T", "W", "T", "F", "S"];

    $('#simple-calendar').bic_calendar({
        //enable select
        enableSelect: false,
        //set day names
        dayNames: dayNames,
        //set month names
        monthNames: monthNames,
        //show dayNames
        showDays: true,
        //show month controller
        displayMonthController: true,
        //show year controller
        displayYearController: true,
        //change calendar to english format
        startWeekDay: 1,
        //set ajax call
        reqAjax: {
            type: 'get',
            url: 'http://bic.cat/bic_calendar/index.php'
        }
    });
});