js – datetimepicker and fullcalendar in angular

octubre 4, 2017

Screenshot from 2017-10-04 12-59-43

To allow our users to quickly chage the events displayed on a fullcalendar.js we thought we could use the bootstrap-datetimepicker to select the date and update the fullcalendar accordingly.

You just need to create your calendar as usual, and add the datetimepicker above, binding its ‘dp.change’ event to fire the gotoDate method on the calendar

<div class="row">
        <div class="'col-sm-3'">
            <div class="form-group">
                <div class="'input-group" id="'datetimepicker'">

                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div id="calendar"></div>
$scope.datetimepicker = $("#datetimepicker").datetimepicker({
                useCurrent: false,
                locale: 'es-MX',
                format: 'DD/MM/YYYY',
                showTodayButton: true
            }).on('dp.change', function(e){
                $scope.calendar.fullCalendar('gotoDate', e.date);
            });

$scope.calendar.fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek'
...

sources:
https://fullcalendar.io/docs/
http://eonasdan.github.io/bootstrap-datetimepicker/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: