js – datetimepicker and fullcalendar in angular

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>
    <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);

                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                defaultView: 'agendaWeek'



Un comentario en “js – datetimepicker and fullcalendar in angular


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 )

Google+ photo

Estás comentando usando tu cuenta de Google+. 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 )

Conectando a %s