Yadda ake gina kalandar ajiyar ɗakuna a Angular

Wannan jagorar tana gina kalanda don ajiyar ɗakunan taro: timeline mai layi ga kowane ɗaki, ajiyoyin wuri da ake ja zuwa inda suka dace, doka da ke hana a yi ajiyar ɗaki sau biyu, da fayil da ke saka ajiyar wuri a kowace kalanda. Tana amfani da jadawalin daga @needless-ui/angular, mai lasisin MIT kamar dukan Needless UI, don haka timeline na resources kyauta ne ga kowace manhaja.

Ɗakuna da ajiyoyin wuri

Ɗakuna resources ne: kowanne yana da id, title, da duk wani abu dabam a cikin data. Ajiyoyin wuri events ne masu lokutan ISO zalla, kamar 2026-10-23T09:00, tare da id na ɗakinsu a cikin resource. Ajiyar wuri ɗaya tana iya ɗaukar ɗakuna da yawa, ko mutane, a matsayin jeri.

Layi ga kowane ɗaki

Ku miƙa su duka biyun ga nui-scheduler tare da view="timeline". dayStart da dayEnd suna taƙaita ranar zuwa lokutan buɗewa, snapMinutes yana matsar da ajiyoyin wuri da minti 15, kuma businessHours suna sanya inuwa a lokacin da ɗakunan ke rufe. nuiSchedulerResource yana zana taken kowane layi.

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>

Yin ajiya da matsarwa

Jadawalin ba ya taɓa canza bayananku da kansa: yana ba da rahoton abin da mutane ke yi ne kawai. Jan a kan layin ɗaki yana zaɓar lokaci, kuma slotSelect yana ba da rahotonsa tare da ɗakin. Jan ajiyar wuri, ko ƙarshenta, yana ba da rahoton sabbin lokutanta a cikin eventChange, da sabon ɗakinta idan an matsar da ita zuwa wani ɗaki. Ku sabunta signal ɗin, sai timeline ɗin ya bi.

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');
  }
}

Babu ajiyar ɗaki sau biyu

Ana tambayar allow kafin a yi ajiyar wuri ko a matsar da ita. Idan ya dawo da false, jan yana bayyana da launin ja kuma ba ya sauke komai, kuma da allon madannai, jadawalin yana sanar da cewa lokacin ba ya samuwa. Misalin yana duba sauran ajiyoyin ɗakin; ku sake dubawa a server ɗinku, domin shi ne ke yanke hukunci na ƙarshe.

Ɗauko kwanakin da ke kan allo

rangeChange yana ba da rahoton rana ta farko da ta ƙarshe da ake nunawa, sau ɗaya a farko, sannan duk lokacin da mutane suka sauya shafi, don ku ɗauko ajiyoyin waɗannan kwanakin kawai, da httpResource ko kowane request da kuke so.

Ƙara zuwa kalanda

nuiSchedulerToIcs() yana rubuta ajiyoyin wuri a matsayin fayil na iCalendar, wanda Google Calendar, Outlook da Apple Calendar ke shigar da shi. nuiSchedulerFromIcs() yana karanta irin wannan fayil, kuma yana mayar da lokuta daga wasu yankunan lokaci zuwa yankin lokacin mai karatu.

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);
}

Allon madannai da manhajojin karanta allo

Duk wannan yana aiki ba tare da linzami ba. Timeline ɗin yana ɗaukar wuri ɗaya kawai a jerin Tab: maɓallan kibiya suna ratsa lokuta da ɗakuna, Shift tare da kibiyoyi yana zaɓar lokaci, kuma Enter yana yin ajiyarsa. A kan ajiyar wuri, Alt tare da kibiyoyi yana matsar da ita zuwa wani lokaci ko wani ɗaki. Kowace ajiyar wuri maɓalli ne mai suna daga takenta, ɗakinta, ranarta da lokacinta.

Don ɗakuna gefe da gefe a rana ɗaya, ajiyoyin wuri masu maimaituwa da kowane zaɓi dabam, ku duba shafin jadawalin da API ɗinsa.