Problem FullCalendar AgendaDay and AgendaWeek view

0

I am integrating fullcalendar with Rails. I can insert events and see them in the "month" view, but I do not see the week and day views.

this is my js:

$(document).ready(function(){
   $('#calendar').fullCalendar({

      monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],

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

        //defaultView: 'agendaWeek',

        minTime: "10:00:00",
        maxTime: "23:30:00",
        height: 'auto',
        hiddenDays: [0, 6],
        slotDuration:"00:20:00",

        timezone: 'local',
        allDaySlot: false,

        businessHours: {
          // days of week. an array of zero-based day of week integers (0=Sunday)
          dow: [ 1, 2, 3, 4, 5 ], // Monday - Thursday

          start: '10:00', // a start time (10am in this example)
          end: '23:30', // an end time (6pm in this example)
        },

        // Get all events stored in database
        eventLimit: true, // allow "more" link when too many events
        events: <%= @events.to_json.html_safe %>,
        selectable: true,
        selectHelper: true,
        editable: true, // Make the event resizable true,


        select: function(start, end) {
          if(start.isBefore(moment())) {
            $('#calendar').fullCalendar('unselect');
              return false;
            }


          $('#modalNew').modal('show');
          $('#txtIni').val(moment(start).format('DD-MM-YYYY h:mm:ss'));
          $('#txtFin').val(moment(end).format('DD-MM-YYYY h:mm:ss'));
          $.getScript('/events/new', function() {});
          //alert(moment(start).format('h:mm:ss a'));
        },

        // Handle Existing Event Click
        eventClick: function(calEvent, jsEvent, view) {
            // Set currentEvent variable according to the event clicked in the calendar
            currentEvent = calEvent;

            // Open modal to edit or delete event
            modal({
                // Available buttons when editing
                buttons: {
                    delete: {
                        id: 'delete-event',
                        css: 'btn-danger',
                        label: 'Delete'
                    },
                    update: {
                        id: 'update-event',
                        css: 'btn-success',
                        label: 'Update'
                    }
                },
                title: 'Edit Event "' + calEvent.title + '"',
                event: calEvent
            });
        }
    });

    // Handle Click on Add Button
    $('.modal').on('click', '#add-event',  function(e){
        if(validator(['title', 'description'])) {
            $.post(base_url+'calendar/addEvent', {
                title: $('#title').val(),
                description: $('#description').val(),
                color: $('#color').val(),
                start: $('#start').val(),
                end: $('#end').val()
            }, function(result){
                $('.alert').addClass('alert-success').text('Event added successfuly');
                $('.modal').modal('hide');
                $('#calendar').fullCalendar("refetchEvents");
                hide_notify();
            });
        }
    });


    // Prepares the modal window according to data passed
    function modal(data) {
        // Set modal title
        $('.modal-title').html(data.title);
        // Clear buttons except Cancel
        $('.modal-footer button:not(".btn-default")').remove();
        // Set input values
        $('#title').val(data.event ? data.event.title : '');        
        $('#description').val(data.event ? data.event.description : '');
        $('#color').val(data.event ? data.event.color : '#3a87ad');
        // Create Butttons
        $.each(data.buttons, function(index, button){
            $('.modal-footer').prepend('<button type="button" id="' + button.id  + '" class="btn ' + button.css + '">' + button.label + '</button>')
        })
        //Show Modal
        $('.modal').modal('show');
    }

    $('#btnOK').on('click',function(){
      var evento = $('#txtPaciente').val();
      var ini = $('#txtIni').val();
      var fin = $('#txtFin').val();

      $.ajax({
        type: 'POST',
        url: '/events/',
        data: {event : {title: evento,start: ini,end: fin}},
        success: function(){
          console.log('Datos guardados');
        },
        error: function(){
          console.log('error ajax');
        }
      });

      console.log(evento+' '+ini+' '+fin);
    });
 });

in the bd the events are created in datetime format. How do I see the events in the AgendaWeek views, and agendaDay in the cells of their respective hours?

    
asked by daniel2016. 14.03.2018 в 03:20
source

0 answers