Angular-இல் அறை முன்பதிவு நாட்காட்டியை உருவாக்குங்கள்

இந்த வழிகாட்டி கூட்ட அறைகளை முன்பதிவு செய்வதற்கான ஒரு நாட்காட்டியை உருவாக்குகிறது: ஒவ்வோர் அறைக்கும் ஒரு வரிசை கொண்ட காலவரிசை, இழுத்து இடத்தில் வைக்கக்கூடிய முன்பதிவுகள், ஓர் அறை இருமுறை முன்பதிவு ஆகாமல் தடுக்கும் விதி, எந்த நாட்காட்டியிலும் முன்பதிவைச் சேர்க்கும் கோப்பு. இது @needless-ui/angular-இன் நிகழ்வு அட்டவணையைப் பயன்படுத்துகிறது; Needless UI முழுவதையும் போலவே அதுவும் MIT உரிமம் கொண்டது, எனவே வளங்களின் காலவரிசை எந்தச் செயலிக்கும் இலவசம்.

அறைகளும் முன்பதிவுகளும்

அறைகள் என்பவை வளங்கள்: ஒரு id, ஒரு title, வேறு எதுவும் data-இல். முன்பதிவுகள், 2026-10-23T09:00 போன்ற சாதாரண ISO நேரங்கள் கொண்ட நிகழ்வுகள்; அவற்றின் அறையின் id resource-இல் இருக்கும். ஒரு முன்பதிவில் பல அறைகளையோ நபர்களையோ பட்டியலாகக் கொடுக்கலாம்.

ஒவ்வோர் அறைக்கும் ஒரு வரிசை

இரண்டையும் view="timeline" உடன் nui-scheduler-க்கு அனுப்புங்கள். dayStart, dayEnd ஆகியவை நாளைத் திறந்திருக்கும் நேரத்துக்குள் வைக்கின்றன; snapMinutes முன்பதிவுகளைக் கால் மணி நேரப் படிகளில் நகர்த்துகிறது; businessHours அறைகள் மூடியிருக்கும் நேரத்தை மங்கலாக்குகிறது. nuiSchedulerResource ஒவ்வொரு வரிசையின் தலைப்பையும் வரைகிறது.

<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>

முன்பதிவு செய்யுங்கள், நகர்த்துங்கள்

நிகழ்வு அட்டவணை உங்கள் தரவைத் தானே ஒருபோதும் மாற்றுவதில்லை: பயனர்கள் செய்வதைத் தெரிவிக்கிறது. ஓர் அறையின் வரிசையின் குறுக்கே இழுத்தால் நேரம் தேர்வாகிறது; slotSelect அதை அறையுடன் சேர்த்துத் தெரிவிக்கிறது. ஒரு முன்பதிவையோ அதன் முடிவு விளிம்பையோ இழுத்தால், அதன் புதிய நேரங்களை eventChange தெரிவிக்கிறது; வேறோர் அறைக்கு நகர்ந்திருந்தால் புதிய அறையையும். சிக்னலைப் புதுப்பியுங்கள்; காலவரிசை அதைப் பின்தொடரும்.

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

இரட்டை முன்பதிவு இல்லை

ஒரு முன்பதிவை உருவாக்கும் முன்னும் நகர்த்தும் முன்னும் allow-இடம் கேட்கப்படுகிறது. அது false தந்தால், இழுத்தல் சிவப்பாகத் தெரியும், விட்டாலும் எதுவும் நடக்காது; விசைப்பலகையில், அந்த நேரம் கிடைக்கவில்லை என்று நிகழ்வு அட்டவணை சொல்லும். எடுத்துக்காட்டு அந்த அறையின் மற்ற முன்பதிவுகளைச் சரிபார்க்கிறது; இறுதி முடிவு உங்கள் சர்வருடையது, எனவே அங்கேயும் மீண்டும் சரிபாருங்கள்.

திரையில் உள்ள நாட்களை ஏற்றுங்கள்

rangeChange காட்டப்படும் முதல், கடைசி நாட்களைத் தெரிவிக்கிறது: தொடக்கத்தில் ஒருமுறை, பயனர்கள் பக்கம் மாற்றும்போதெல்லாம் மீண்டும். அதனால் அந்த முன்பதிவுகளை மட்டும், httpResource அல்லது நீங்கள் விரும்பும் எந்தக் கோரிக்கை மூலமும் பெறலாம்.

நாட்காட்டியில் சேருங்கள்

nuiSchedulerToIcs() முன்பதிவுகளை iCalendar கோப்பாக எழுதுகிறது; Google Calendar, Outlook, Apple Calendar ஆகியவை அதை இறக்குமதி செய்கின்றன. nuiSchedulerFromIcs() அத்தகைய கோப்பைத் திரும்பப் படிக்கிறது; பிற நேர மண்டலங்களின் நேரங்களைப் பயனரின் நேர மண்டலத்துக்கு மாற்றுகிறது.

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

விசைப்பலகையும் ஸ்கிரீன் ரீடர்களும்

இவை அனைத்தும் மவுஸ் இல்லாமலே வேலை செய்கின்றன. காலவரிசை ஒரே Tab நிறுத்தம்: அம்புக்குறி விசைகளால் நேரங்கள், அறைகள் வழியே நகரலாம்; Shift உடன் அம்புக்குறிகள் நேரத்தைத் தேர்ந்தெடுக்கின்றன; Enter அதை முன்பதிவு செய்கிறது. ஒரு முன்பதிவில், Alt உடன் அம்புக்குறிகள் அதை வேறு நேரத்துக்கோ அறைக்கோ நகர்த்துகின்றன. ஒவ்வொரு முன்பதிவும் அதன் தலைப்பு, அறை, நாள், நேரத்தைப் பெயராகக் கொண்ட பொத்தான்.

ஒரு நாளில் அருகருகே அறைகள், மீண்டும் வரும் முன்பதிவுகள், மற்ற எல்லா விருப்பங்களுக்கும் நிகழ்வு அட்டவணையின் பக்கத்தையும் அதன் API-ஐயும் பாருங்கள்.