Angular Scheduler Library

A powerful, feature-rich Angular 17+ scheduler library for building enterprise-grade scheduling and roster management applications. Perfect for employee scheduling, shift planning, calendar management, and time tracking systems.

🚀 Features

📅 Multiple Calendar Views

• Month View - Complete monthly overview with all employees
• Week View - Detailed 7-day week view with drag-and-drop
• Day View - Hourly timeline breakdown (24-hour format)

⚡ Performance Optimized

• Virtual Scrolling using Angular CDK for handling thousands of employees
• Lazy Loading with progressive data loading
• OnPush Change Detection for optimal performance
• Infinite Scroll Pagination for large datasets

🎯 Core Capabilities

• ✅ Drag & Drop - Move schedules between dates and employees
• ✅ Timezone Support - Full moment-timezone integration
• ✅ Leave Management - Handle PTO, paid/unpaid leaves, holidays
• ✅ Shift Management - Regular shifts, overnight shifts, split shifts
• ✅ Bulk Operations - Checkbox selection for mass actions
• ✅ Responsive Design - Works seamlessly on mobile and desktop
• ✅ Permission System - Role-based access control
• ✅ Custom Styling - Fully customizable appearance
• ✅ Export Options - Print, email, and export schedules

🎨 Advanced Features

• Multiple schedule types (work, leave, PTO, holidays)
• Short leave support within working days
• Weekend and holiday highlighting
• Real-time search and filtering
• Employee profile integration
• Currency and wage display
• Custom validation functions
• Empty cell click handlers
• Event-driven architecture

📦 Installation

NPM

npm install ms-duty-roster --save

Yarn

yarn add ms-duty-roster

PNPM

pnpm add ms-duty-roster

🔧 Dependencies

The library requires the following peer dependencies:

npm install @angular/common @angular/core @angular/cdk ngx-bootstrap moment moment-timezone

🎓 Quick Start

1. Import the Module

import { SchedulerModule } from 'ms-duty-roster';

@NgModule({
  imports: [
    SchedulerModule
  ]
})
export class AppModule { }

2. Add to Your Component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <lib-ms-scheduler
      [dataSet]="scheduleData"
      [currentView]="'month'"
      [timeZone]="'America/New_York'"
      [selectedDateFormat]="'MM/DD/YYYY'"
      (genericEvent)="handleEvent($event)">
    </lib-ms-scheduler>
  `
})
export class AppComponent {
  scheduleData = {
    users: [...],
    schedules: [...],
    // ... more data
  };

  handleEvent(event: any) {
    console.log('Event:', event);
  }
}

3. Configure Your Data

scheduleData = {
  users: [
    {
      id: 1,
      name: 'John Doe',
      email: '[email protected]',
      position: 'Developer'
    }
  ],
  schedules: [
    {
      id: 1,
      userId: 1,
      startDate: '2025-11-13 09:00',
      endDate: '2025-11-13 17:00',
      type: 'work'
    }
  ],
  publicHolidays: [],
  weekendDates: []
};

📖 Component API

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | dataSet | any | - | Schedule data object (users, schedules, holidays) | | currentView | 'month' \| 'week' \| 'day' | 'month' | Initial calendar view | | timeZone | string | 'UTC' | Timezone for date calculations | | selectedDateFormat | string | 'MM/DD/YYYY' | Date format for display | | authToken | string | - | Authentication token for API calls | | currencyFormat | string | 'USD' | Currency format for wage display | | enableVirtualScroll | boolean | true | Enable virtual scrolling | | enableScrollPagination | boolean | true | Enable infinite scroll | | permissions | object | {} | Permission flags for features | | filterCount | number | 0 | Active filter count | | globalSearchCount | number | 0 | Search result count | | validateUserFn | Function | - | Custom user validation function |

Outputs

| Output | Description | |--------|-------------| | genericEvent | Emits all scheduler events with type and data |

Event Types

// Navigation
'generatedView'           // View changed (month/week/day)
'pageChange'              // Page navigation
'changePageSize'          // Page size changed

// User Actions
'viewProfile'             // User profile clicked
'viewSchedule'            // Schedule clicked
'onEmptyCellClicked'      // Empty cell clicked
'buttonClick'             // Action button clicked

// Schedule Operations
'copyScheduleByDate'      // Copy schedule to date
'copyScheduleFromEmpToEmp' // Copy between employees
'checkSchedule'           // Checkbox toggled

// Search & Filter
'schedulerInternalSearch' // Search performed
'toggleAdvanceFilter'     // Filter toggled
'clearFilter'             // Filters cleared

🎯 Use Cases

Perfect for building:

• 👥 Employee Scheduling Systems - Manage work shifts and rosters
• 🏥 Healthcare Scheduling - Doctor/nurse shift planning
• 🏭 Manufacturing Rosters - Factory shift management
• 🎓 Educational Timetables - Teacher and class scheduling
• 🚚 Delivery Planning - Driver schedule management
• 💼 Project Resource Planning - Team member allocation
• 🏨 Hospitality Scheduling - Hotel and restaurant staff rosters

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📝 Requirements

• Angular 17 or higher
• Node.js 18 or higher
• TypeScript 5.2 or higher

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Documentation
• Issue Tracker
• Changelog

💬 Support

For questions and support, please open an issue in the GitHub repository.

🏷️ Keywords

angular scheduler, calendar library, angular calendar, employee scheduler, shift planner, roster management, drag and drop calendar, angular 17, scheduling component, time management, leave management, virtual scroll calendar

Made with ❤️ by MS Scheduler Team