Search code examples
javascriptangularjsfullcalendarangular-ui

Disable Event resizing in Angular-UI calendar / fullcalender


We don't have any duration for our events that we visualize using angular-ui-calendar, so we don't want the user to do any resizing, while still being able to drag&drop the events to move them to another date and time. Where can I configure this?

$scope.uiConfig = {
    calendar: {
      height: 450,
      editable: true,
      // here?! resizable: false won't work


  $scope.events = [
    {
        // or here? resizable: false won't do anything
        title: "Test", start: new Date(2014, 0, 1, 12, 0), end: new Date(2014, 0, 1, 12, 30), allDay: false}
  ];

Of course I could just revert the resize in the event handler (eventResize), but I think that results in a bad user experience.

Also: We would like to hide the end date of an event, since we don't have any (skipping the endDate property will just result in a two hour duration, so using half an hour will at least keep the size small)

Thanks!


Solution

  • Depends on your version of fullcalendar. The latest is eventDurationEditable (since 1.6.3).

    http://arshaw.com/fullcalendar/docs/event_ui/eventDurationEditable/

    Example:

    $('#calendar').fullCalendar({
            editable: true,
            eventDurationEditable: false, ...
    

    Deprecated version

    $('#calendar').fullCalendar({
            editable: true,
            disableResizing: true, ...