fullcalendar之angular15-ngrx

一、创建angular项目

1、angular升级到最新15版本

npm install --save-dev @angular/cli@latest   //更新 Angular CLI
npm install --save-dev @angular/core@latest   //更新 Angular
ng version //查看是不是15版本

2、new angular项目

ng new angular15-ngrx

image.png

3、安装依赖

npm i lodash
npm i -D @types/lodash
npm i @ngrx/store --save
npm i @fullcalendar/angular //安装angular版fullcalendar
npm i @fullcalendar/daygrid 
npm i @fullcalendar/core
npm i @fullcalendar/interaction
npm i @fullcalendar/list
npm i @fullcalendar/timegrid

二、代码块

1、在app/data/event-utils.ts

import { EventInput } from '@fullcalendar/core';

let eventGuid = 0;
const TODAY_STR = new Date().toISOString().replace(/T.*$/, ''); // YYYY-MM-DD of today

export const INITIAL_EVENTS: EventInput[] = [
  {
    id: createEventId(),
    title: 'All-day event',
    start: TODAY_STR
  },
  {
    id: createEventId(),
    title: 'Timed event',
    start: TODAY_STR + 'T00:00:00',
    end: TODAY_STR + 'T03:00:00'
  },
  {
    id: createEventId(),
    title: 'Timed event',
    start: TODAY_STR + 'T12:00:00',
    end: TODAY_STR + 'T15:00:00'
  }
];

export function createEventId() {
  return String(eventGuid++);
}

2、在app/state/actions.ts

import { EventInput } from "@fullcalendar/core";
import { createAction, props } from "@ngrx/store";

export const toggleCalendar = createAction('[Fullcalendar] Toggle Calendar');
export const createEvent = createAction('[Fullcalendar] Create Event', props<{ event: EventInput }>());
export const editEvent = createAction('[Fullcalendar] Edit Event', props<{ event: EventInput }>());
export const deleteEvent = createAction('[Fullcalendar] Delete Event', props<{ id: string }>());

3、在app/state/reducer.ts

import { EventInput } from '@fullcalendar/core';
import { createFeature, createReducer, createSelector, on } from '@ngrx/store';
import { INITIAL_EVENTS } from '../data/event-utils';
import * as CalendarActions from './actions';
import * as _ from 'lodash';

interface State {
  calendarVisible: boolean,
  events: EventInput[]
}

const initialState: State = {
  calendarVisible: true,
  events: INITIAL_EVENTS
}

export const CalendarFeature = createFeature({
  name: 'calendar',
  reducer: createReducer(
    initialState,
    on(CalendarActions.toggleCalendar, state => ({ ...state, calendarVisible: !state.calendarVisible })),
    on(CalendarActions.createEvent, (state, { event }) => ({ ...state, events: [...state.events, event] })),
    on(CalendarActions.editEvent, (state, { event }) => {
      const list = _.cloneDeep(state.events)
      _.remove(list, item=>{
        return item.id === event.id
      })
      return ({ ...state, events: [...list, event] })
    }),
    on(CalendarActions.deleteEvent, (state, { id }) => ({ ...state, events: state.events.filter(e => e.id !== id) }))
  )
});

export const {
  name,
  reducer,
  selectCalendarState,
  selectCalendarVisible,
  selectEvents
} = CalendarFeature;

export const selectEventsCount = createSelector(
  CalendarFeature.selectEvents,
  events => events.length
);

4、在app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FullCalendarModule } from '@fullcalendar/angular';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { CalendarFeature } from './state/reducer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FullCalendarModule,
    StoreModule.forRoot(),
    StoreModule.forFeature(CalendarFeature)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5、在app/app.component.css

h2 {
  margin: 0;
  font-size: 16px;
}

ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}

li {
  margin: 1.5em 0;
  padding: 0;
}

b { /* used for event dates/times */
  margin-right: 3px;
}

.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-sidebar {
  width: 300px;
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}

.demo-app-sidebar-section {
  padding: 2em;
}

.demo-app-main {
  flex-grow: 1;
  padding: 3em;
}

.fc { /* the calendar root */
  max-width: 1100px;
  margin: 0 auto;
}

6、在app/app.component.html

<div class='demo-app'>

  <div class='demo-app-sidebar'>
    <div class='demo-app-sidebar-section'>
      <h2>Instructions</h2>
      <ul>
        <li>Select dates and you will be prompted to create a new event</li>
        <li>Drag, drop, and resize events</li>
        <li>Click an event to delete it</li>
      </ul>
    </div>
    <div class='demo-app-sidebar-section'>
      <label>
        <input
          type='checkbox'
          [checked]='calendarVisible$ | async'
          (change)='handleCalendarToggle()'
        />
        toggle whole calendar
      </label>
    </div>
    <div class='demo-app-sidebar-section'>
      <label>
        <input
          type='checkbox'
          [checked]='calendarOptions.weekends'
          (change)='handleWeekendsToggle()'
        />
        toggle weekends
      </label>
    </div>
    <div class='demo-app-sidebar-section'>
      <h2>All Events ({{(eventsCount$ | async)}})</h2>
      <ul>
        <li *ngFor='let event of (events$ | async)'>
          <b>{{event.start}}</b>
          <i>{{event.title}}</i>
        </li>
      </ul>
    </div>
  </div>

  <div class='demo-app-main'>
    <full-calendar
      *ngIf='calendarVisible$ | async'
      [options]='calendarOptions'
      [events]="events$ | async"
    >
      <ng-template #eventContent let-arg>
        <b>{{ arg.timeText }}<span *ngIf="arg.timeText">m</span></b>
        <i>{{ arg.event.title }}</i>
      </ng-template>
    </full-calendar>
  </div>
</div>

7、在app/app.component.ts

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { CalendarOptions, DateSelectArg, EventClickArg, EventInput } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import { createEventId } from './data/event-utils';
import { CalendarFeature, selectEventsCount } from './state/reducer';
import * as CalendarActions from './state/actions';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  calendarOptions: CalendarOptions = {
    plugins: [
      interactionPlugin,
      dayGridPlugin,
      timeGridPlugin,
      listPlugin,
    ],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialView: 'dayGridMonth',
    weekends: true,
    editable: true,
    selectable: true,
    selectMirror: true,
    dayMaxEvents: true,
    select: this.handleDateSelect.bind(this),
    eventClick: this.handleEventClick.bind(this),
    eventDrop: this.handleEventDrop.bind(this),
    /* you can update a remote database when these fire:
    eventAdd:
    eventChange:
    eventRemove:
    */
  };

  calendarVisible$ = this.store.select(CalendarFeature.selectCalendarVisible);
  events$ = this.store.select(CalendarFeature.selectEvents);
  eventsCount$ = this.store.select(selectEventsCount);

  list = [
    {
      id: '001',
      title: 'All-day event',
      start: '2022-12-15'
    },
  ]

  constructor(private readonly store: Store) { }

  handleCalendarToggle() {
    this.store.dispatch(CalendarActions.toggleCalendar());
  }

  handleWeekendsToggle() {
    const { calendarOptions } = this;
    calendarOptions.weekends = !calendarOptions.weekends;
  }

  handleDateSelect(selectInfo: DateSelectArg) {
    const title = prompt('Please enter a new title for your event');
    const calendarApi = selectInfo.view.calendar;

    calendarApi.unselect(); // clear date selection

    if (title) {
      const event: EventInput = {
        id: createEventId(),
        title,
        start: selectInfo.startStr,
        end: selectInfo.endStr,
        allDay: selectInfo.allDay
      };
      this.store.dispatch(CalendarActions.createEvent({ event }));
    }
  }

  handleEventClick(clickInfo: EventClickArg) {
    if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
      this.store.dispatch(CalendarActions.deleteEvent({ id: clickInfo.event.id }));
    }
  }

  handleEventDrop(events: any){
    console.log(events)
    const event:EventInput = {
      id: events.event.id,
      title: events.event.title,
      start: events.event.startStr,
      end: events.event.endStr,
      allDay: events.event.allDay
    };
    this.store.dispatch(CalendarActions.editEvent({ event }));
  }
}

三、运行项目

ng serve

image.png