Meal Planner

Use the timeline summary mode/event listing to create a weekly meal planner. Meal types are represented as resources with a custom template. Events are the actual meals with custom properties, like calories or notes.

The add/edit form shows up in a custom popover that opens on double click for meal creation and on click for editing.

The popover header is customized with a custom header renderer function using the renderHeader option.

By default the second dimension of the timeline (vertical axis) is reserved for resources, however it can be configured and used as "time slots" if the times are not relevant.

Download and try example

Demo

Loading the live demo

Preview in full screen

Build a weekly meal planner with the Timeline — meal types as color-coded resource rows, custom add/edit popover for creating or updating meals.

Code

View code on GitHub 
mobiscroll.setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

$(function () {
  var oldMeal;
  var tempMeal;
  var deleteMeal;
  var restoreMeal;
  var formatDate = mobiscroll.formatDate;
  var $name = $('#meal-name-input');
  var $calories = $('#meal-calories-input');
  var $notes = $('#meal-notes-textarea');
  var $deleteButton = $('#meal-delete');
  var $types = $('#meal-type-segmented');

  var types = [
    {
      id: 1,
      name: 'Breakfast',
      color: '#e20f0f',
      kcal: '300 - 400 kcal',
      icon: '🍳',
    },
    {
      id: 2,
      name: 'Elevenses',
      color: '#157d13',
      kcal: '100 - 200 kcal',
      icon: '🍌',
    },
    {
      id: 3,
      name: 'Lunch',
      color: '#32a6de',
      kcal: '500 - 700 kcal',
      icon: '🍜',
    },
    {
      id: 4,
      name: 'Dinner',
      color: '#e29d1d',
      kcal: '400 - 600 kcal',
      icon: '🥙',
    },
    {
      id: 5,
      name: 'Snack',
      color: '#68169c',
      kcal: '100 - 200 kcal',
      icon: '🥨',
    },
  ];

  function addMealPopup() {
    // Hide delete button inside add popup
    $deleteButton.hide();
    deleteMeal = true;
    restoreMeal = false;

    // Set popup header text and buttons for adding
    popup.setOptions({
      buttons: [
        'cancel',
        {
          text: 'Add',
          keyCode: 'enter',
          handler: function () {
            calendar.updateEvent(tempMeal);

            deleteMeal = false;
            popup.close();
          },
          cssClass: 'mbsc-popup-button-primary',
        },
      ],
      renderHeader: function () {
        return (
          '<div class="md-meal-planner-header-primary">New meal</div>' +
          '<div class="md-meal-planner-header-date">' +
          formatDate('DDDD, DD MMMM YYYY', new Date(tempMeal.start)) +
          '</div>'
        );
      },
    });

    // Fill popup with a new event data
    $name.mobiscroll('getInst').value = tempMeal.title;
    $calories.mobiscroll('getInst').value = '';
    $notes.mobiscroll('getInst').value = '';

    $('.meal-planner-type').each(function (i, elm) {
      $(elm).mobiscroll('getInst').checked = +elm.value == tempMeal.resource;
    });

    popup.open();
  }

  function editMealPopup(args) {
    var ev = args.event;
    var resource = args.resourceObj;

    // Show delete button inside edit popup
    $deleteButton.show();

    deleteMeal = false;
    restoreMeal = true;

    // Set popup header text and buttons for editing
    popup.setOptions({
      buttons: [
        'cancel',
        {
          text: 'Save',
          keyCode: 'enter',
          handler: function () {
            // Update event with the new properties on save button click
            calendar.updateEvent({
              id: ev.id,
              title: tempMeal.title,
              calories: tempMeal.calories,
              notes: tempMeal.notes,
              start: ev.start,
              end: ev.end,
              resource: tempMeal.resource,
              allDay: true,
            });

            restoreMeal = false;
            popup.close();
          },
          cssClass: 'mbsc-popup-button-primary',
        },
      ],
      renderHeader: function () {
        return (
          '<div class="md-meal-planner-header-primary">' +
          resource.name +
          '</div>' +
          '<div class="md-meal-planner-header-date">' +
          formatDate('DDDD, DD MMMM YYYY', new Date(tempMeal.start)) +
          '</div>'
        );
      },
    });

    // Fill popup with the selected event data
    $name.mobiscroll('getInst').value = ev.title || '';
    $calories.mobiscroll('getInst').value = ev.calories || '';
    $notes.mobiscroll('getInst').value = ev.notes || '';

    $('.meal-planner-type').each(function (i, elm) {
      $(elm).mobiscroll('getInst').checked = +elm.value == tempMeal.resource;
    });

    popup.open();
  }

  var calendar = $('#demo-meal-planner')
    .mobiscroll()
    .eventcalendar({
      view: {
        timeline: {
          type: 'week',
          eventDisplay: 'fill',
        },
      },
      resources: types,
      dragToCreate: false,
      dragToResize: false,
      dragToMove: true,
      clickToCreate: true,
      extendDefaultEvent: function () {
        return {
          title: 'New meal',
          allDay: true,
        };
      },
      onEventCreate: function (args) {
        // Store temporary event
        tempMeal = args.event;
        setTimeout(function () {
          addMealPopup();
        }, 100);
      },
      onEventClick: function (args) {
        oldMeal = $.extend({}, args.event);
        tempMeal = args.event;

        if (!popup.isVisible()) {
          editMealPopup(args);
        }
      },
      renderResource: function (resource) {
        return (
          '<div class="md-meal-planner-cont">' +
          '<div class="md-meal-planner-title" style="color:' +
          resource.color +
          '">' +
          '<span class="md-meal-planner-icon">' +
          resource.icon +
          '</span>' +
          resource.name +
          '</div>' +
          '<div class="md-meal-planner-kcal">' +
          resource.kcal +
          '</div>' +
          '</div>'
        );
      },
      renderTimelineEventContent: function (args) {
        var event = args.original;
        return (
          '<div class="md-meal-planner-event">' +
          '<div class="md-meal-planner-event-title">' +
          event.title +
          '</div>' +
          (event.calories ? '<div class="md-meal-planner-event-desc">Calories: ' + event.calories + ' kcal</div>' : '') +
          '</div>'
        );
      },
    })
    .mobiscroll('getInst');

  $.getJSON(
    'https://trial.mobiscroll.com/meal-planner/?callback=?',
    function (events) {
      calendar.setEvents(events);
    },
    'jsonp',
  );

  var popup = $('#meal-planner-popup')
    .mobiscroll()
    .popup({
      display: 'bottom',
      contentPadding: false,
      fullScreen: true,
      onClose: function () {
        if (deleteMeal) {
          calendar.removeEvent(tempMeal);
        } else if (restoreMeal) {
          calendar.updateEvent(oldMeal);
        }
      },
      responsive: {
        medium: {
          display: 'center',
          width: 400,
          fullScreen: false,
          touchUi: false,
          showOverlay: false,
        },
      },
    })
    .mobiscroll('getInst');

  function appendTypes() {
    var segmented = '<div mbsc-segmented-group>';

    for (var i = 0; i < types.length; ++i) {
      var type = types[i];
      segmented +=
        '<label>' +
        type.name +
        '<input type="radio" mbsc-segmented name="meal-planner-type" value="' +
        type.id +
        '" class="meal-planner-type" ' +
        '/></label>';
    }

    segmented += '</div>';
    $types.append(segmented);
    mobiscroll.enhance($types[0]);
  }

  appendTypes();

  $('.meal-planner-type').on('change', function (ev) {
    tempMeal.resource = +ev.target.value;
  });

  $name.on('change', function (ev) {
    tempMeal.title = ev.target.value;
  });

  $calories.on('change', function (ev) {
    tempMeal.calories = ev.target.value;
  });

  $notes.on('change', function (ev) {
    tempMeal.notes = ev.target.value;
  });

  $deleteButton.on('click', function () {
    // Delete current event on button click
    calendar.removeEvent(tempMeal);

    // Save a local reference to the deleted event
    var deletedMeal = tempMeal;

    popup.close();

    mobiscroll.snackbar({
      button: {
        action: function () {
          calendar.addEvent(deletedMeal);
        },
        text: 'Undo',
      },
      duration: 10000,
      message: 'Meal deleted',
    });
  });
});

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.