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 template using the headerTemplate 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.

Get started with this 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 
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  formatDate,
  MbscCalendarEvent,
  MbscEventcalendarOptions,
  MbscModule,
  MbscPopup,
  MbscPopupOptions,
  Notifications,
  setOptions ,
} from '@mobiscroll/angular';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(
    private http: HttpClient,
    private notify: Notifications,
  ) {}
  @ViewChild('popup', { static: false })
  popup!: MbscPopup;
  myMeals: MbscCalendarEvent[] = [];
  name = '';
  calories = '';
  notes = '';
  type = 1;
  tempMeal: any;
  headerPrimary = '';
  headerDate = '';
  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: '🥨',
    },
  ];
  popupAddButtons = [
    'cancel',
    {
      handler: () => {
        this.saveEvent();
      },
      keyCode: 'enter',
      text: 'Add',
      cssClass: 'mbsc-popup-button-primary',
    },
  ];
  popupEditButtons = [
    'cancel',
    {
      handler: () => {
        this.saveEvent();
      },
      keyCode: 'enter',
      text: 'Save',
      cssClass: 'mbsc-popup-button-primary',
    },
  ];
  popupButtons: any = [];
  popupOptions: MbscPopupOptions = {
    display: 'bottom',
    contentPadding: false,
    fullScreen: true,
    onClose: () => {
      if (!this.isEdit) {
        // Refresh the list, if add popup was canceled, to remove the temporary event
        this.myMeals = [...this.myMeals];
      }
    },
    responsive: {
      medium: {
        display: 'center',
        width: 400,
        fullScreen: false,
        touchUi: false,
      },
    },
  };
  isEdit = false;
  calendarOptions: MbscEventcalendarOptions = {
    view: {
      timeline: {
        type: 'week',
        eventDisplay: 'fill',
      },
    },
    dragToCreate: false,
    dragToResize: false,
    dragToMove: true,
    clickToCreate: true,
    extendDefaultEvent: () => ({
      title: 'New meal',
      allDay: true,
    }),
    onEventClick: (args: any) => {
      const event = args.event;
      const resource = args.resourceObj!;
      this.isEdit = true;
      this.tempMeal = event;
      // Fill popup form with event data
      this.loadPopupForm(event);
      // Set popup options
      this.popupButtons = this.popupEditButtons;
      this.headerPrimary = resource.name;
      this.headerDate = formatDate('DDDD, DD MMMM YYYY', new Date(event.start));
      this.type = +event.resource;
      // Open the popup
      this.popup.open();
    },
    onEventCreated: (args: any) => {
      const event = args.event;
      setTimeout(() => {
        this.isEdit = false;
        this.tempMeal = event;
        // Fill popup form with event data
        this.loadPopupForm(event);
        // Set popup options
        this.popupButtons = this.popupAddButtons;
        this.headerPrimary = 'New meal';
        this.headerDate = formatDate('DDDD, DD MMMM YYYY', new Date(this.tempMeal.start));
        this.type = +event.resource;
        // Open the popup
        this.popup.open();
      });
    },
    onEventDeleted: (args) => {
      setTimeout(() => {
        this.deleteMeal(args.event);
      });
    },
  };

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/meal-planner/', 'callback').subscribe((resp) => {
      this.myMeals = resp;
    });
  }
  loadPopupForm(event: any): void {
    this.name = event.title;
    this.calories = event.calories;
    this.notes = event.notes;
  }
  saveEvent(): void {
    this.tempMeal.title = this.name;
    this.tempMeal.calories = this.calories;
    this.tempMeal.notes = this.notes;
    this.tempMeal.allDay = true;
    this.tempMeal.resource = this.type;
    if (this.isEdit) {
      // Update the event in the list
      this.myMeals = [...this.myMeals];
    } else {
      // Add the new event to the list
      this.myMeals = [...this.myMeals, this.tempMeal];
    }
    // Close the popup
    this.popup.close();
  }
  deleteMeal(event: MbscCalendarEvent): void {
    this.myMeals = this.myMeals.filter((item) => item.id !== event.id);
    this.notify.snackbar({
      button: {
        action: () => {
          this.myMeals = [...this.myMeals, event];
        },
        text: 'Undo',
      },
      message: 'Meal deleted',
    });
  }
  onDeleteClick(): void {
    this.deleteMeal(this.tempMeal);
    this.popup.close();
  }
}

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.