Jenga kalenda ya kuhifadhi vyumba kwa Angular

Mwongozo huu unajenga kalenda ya kuhifadhi vyumba vya mikutano: mstari wa muda wenye safu kwa kila chumba, uhifadhi unaoburutwa hadi mahali pake, kanuni inayozuia chumba kuhifadhiwa mara mbili, na faili inayoweka uhifadhi kwenye kalenda yoyote. Unatumia kipanga ratiba kutoka @needless-ui/angular, chenye leseni ya MIT kama Needless UI yote, hivyo mstari wa muda wa rasilimali ni bure kwa programu yoyote.

Vyumba na uhifadhi

Vyumba ni rasilimali: kila kimoja kina id, title, na chochote kingine katika data. Kila uhifadhi ni tukio lenye nyakati za kawaida za ISO, kama 2026-10-23T09:00, na id ya chumba chake katika resource. Uhifadhi mmoja unaweza kuwa na vyumba kadhaa, au watu kadhaa, katika orodha.

Safu kwa kila chumba

Pitisha vyote viwili kwa nui-scheduler pamoja na view="timeline". dayStart na dayEnd huonyesha saa ambazo vyumba viko wazi pekee, snapMinutes husogeza uhifadhi kwa robo saa, na businessHours hutia kivuli muda ambao vyumba vimefungwa. nuiSchedulerResource huchora kichwa cha kila safu.

booking.html

<nui-scheduler
  [events]="bookings()"
  [resources]="rooms"
  view="timeline"
  dayStart="8"
  dayEnd="19"
  snapMinutes="15"
  [businessHours]="hours"
  editable
  selectable
  [allow]="free"
  (slotSelect)="book($event)"
  (eventChange)="move($event)"
  (rangeChange)="range.set($event)"
>
  <ng-template nuiSchedulerResource let-room>{{ room.title }}</ng-template>
</nui-scheduler>
<button nuiButton type="button" (click)="download()">Add to calendar</button>

Kuhifadhi na kuhamisha

Kipanga ratiba hakibadilishi kamwe data yako chenyewe: huripoti kile ambacho watu hufanya. Kuburuta juu ya safu ya chumba huchagua muda, na slotSelect huuripoti pamoja na chumba. Kuburuta uhifadhi, au mwisho wake, huripoti nyakati zake mpya katika eventChange, na chumba chake kipya ukihamishiwa chumba kingine. Sasisha signal, na mstari wa muda utafuata.

booking.ts

import { Component, signal } from '@angular/core';
import { NuiButton } from '@needless-ui/angular/button';
import {
  NuiScheduler,
  type NuiSchedulerChange,
  type NuiSchedulerEvent,
  NuiSchedulerResourceTemplate,
  type NuiSchedulerSlot,
} from '@needless-ui/angular/scheduler';
import { downloadIcs } from './booking-ics';

@Component({
  selector: 'app-bookings',
  imports: [NuiButton, NuiScheduler, NuiSchedulerResourceTemplate],
  templateUrl: './booking.html',
})
export class Bookings {
  /** Rooms are resources; bookings are events, with their room in `resource`. */
  protected readonly rooms = [
    { id: 'atlas', title: 'Atlas' },
    { id: 'boreal', title: 'Boreal' },
  ];
  protected readonly bookings = signal<NuiSchedulerEvent[]>([]);
  /** Open on weekdays from 8:00 to 19:00: other time is shaded. */
  protected readonly hours = [{ days: [1, 2, 3, 4, 5], start: '08:00', end: '19:00' }];
  /** The days on screen: load their bookings when it changes. */
  protected readonly range = signal<{ start: string; end: string } | null>(null);

  protected book({ start, end, resource }: NuiSchedulerSlot): void {
    const booking = { id: crypto.randomUUID(), title: 'New booking', start, end, resource };
    this.bookings.update((all) => [...all, booking]);
  }

  protected move({ event, start, end, resource }: NuiSchedulerChange): void {
    this.bookings.update((all) =>
      all.map((b) =>
        b.id === event.id ? { ...b, start, end, resource: resource ?? b.resource } : b,
      ),
    );
  }

  /** A room holds one booking at a time. */
  protected readonly free = (time: NuiSchedulerChange | NuiSchedulerSlot): boolean => {
    const id = 'event' in time ? time.event.id : null;
    const room = 'event' in time ? (time.resource ?? time.event.resource) : time.resource;
    return !this.bookings().some(
      (b) => b.id !== id && b.resource === room && b.start < time.end && b.end > time.start,
    );
  };

  protected download(): void {
    downloadIcs(this.bookings(), 'bookings');
  }
}

Hakuna uhifadhi maradufu

allow huulizwa kabla ya uhifadhi kufanywa au kuhamishwa. Ikirudisha false, uburutaji huonekana mwekundu na hauweki chochote, na kwa kibodi kipanga ratiba husema kwamba muda huo haupatikani. Mfano hukagua uhifadhi mwingine wa chumba hicho; kagua tena kwenye seva yako, ambayo ndiyo yenye uamuzi wa mwisho.

Pakia siku zilizo kwenye skrini

rangeChange huripoti siku ya kwanza na ya mwisho zinazoonyeshwa, mara moja mwanzoni na tena kila watu wanapobadilisha ukurasa, ili ulete uhifadhi wa siku hizo pekee, kwa httpResource au ombi lolote unalopenda.

Ongeza kwenye kalenda

nuiSchedulerToIcs() huandika uhifadhi kama faili ya iCalendar, ambayo Google Calendar, Outlook na Apple Calendar huiingiza. nuiSchedulerFromIcs() husoma faili kama hiyo, na huhamisha nyakati kutoka kanda nyingine za saa hadi kanda ya saa ya msomaji.

booking-ics.ts

import { type NuiSchedulerEvent, nuiSchedulerToIcs } from '@needless-ui/angular/scheduler';

/** Saves events as an .ics file, which Google Calendar, Outlook and Apple Calendar import. */
export function downloadIcs(events: readonly NuiSchedulerEvent[], name: string): void {
  const file = new Blob([nuiSchedulerToIcs(events, { name })], { type: 'text/calendar' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(file);
  link.download = `${name}.ics`;
  link.click();
  URL.revokeObjectURL(link.href);
}

Kibodi na visoma skrini

Yote haya hufanya kazi bila kipanya. Mstari wa muda ni kituo kimoja cha Tab: vitufe vya mishale hupitia nyakati na vyumba, Shift pamoja na mishale huchagua muda, na Enter huuhifadhi. Kwenye uhifadhi, Alt pamoja na mishale huuhamisha hadi muda mwingine au chumba kingine. Kila uhifadhi ni kitufe kinachopewa jina kwa kichwa, chumba, siku na saa yake.

Kwa vyumba kando kwa kando katika siku moja, uhifadhi unaojirudia na kila chaguo jingine, tazama ukurasa wa kipanga ratiba na API yake.