kcsujeet

Posted on Oct 13

ilamy Calendar v1.0.0: Resource Calendar is Here! 🎉

#react #opensource #calendar #typescript

Big news! ilamy Calendar v1.0.0 is officially released! 🎉

A few months ago, I introduced ilamy Calendar as a React-first calendar library built for developers who wanted full control over styling without fighting CSS. The response has been incredible, and today I'm excited to share v1.0.0 with its most requested feature:

What's New in v1.0.0

Resource Calendar - The Star of v1.0.0

Resource Calendar lets you visualize and manage events across multiple resources in a timeline layout. Perfect for:

Conference room scheduling
Equipment booking systems
Team member availability
Vehicle fleet management
Any resource-based scheduling scenario

Here's how simple it is to use:

import { IlamyResourceCalendar } from '@ilamy/calendar';
import type { Resource, ResourceCalendarEvent } from '@ilamy/calendar';
import dayjs from 'dayjs';

const resources: Resource[] = [
  {
    id: 'room-a',
    title: 'Conference Room A',
    color: '#3B82F6',
    backgroundColor: '#EFF6FF',
  },
  {
    id: 'room-b',
    title: 'Conference Room B',
    color: '#EF4444',
    backgroundColor: '#FEF2F2',
  },
  {
    id: 'room-c',
    title: 'Conference Room C',
    color: '#8B5CF6',
    backgroundColor: '#F5F3FF',
  },
];

const events: ResourceCalendarEvent[] = [
  {
    id: 'event-1',
    title: 'Team Meeting',
    start: dayjs('2025-10-15T09:00:00'),
    end: dayjs('2025-10-15T10:00:00'),
    uid: '[email protected]',
    resourceId: 'room-a', // Assigned to Room A
  },
];

function MyResourceCalendar() {
  return (
    <IlamyResourceCalendar
      resources={resources}
      events={events}
      initialView="week"
      renderResource={(resource) => (
        <div className="flex items-center gap-2 p-2">
          <div className="flex flex-col">
            <span className="font-semibold">{resource.title}</span>
            <span className="text-xs text-gray-500">Available</span>
          </div>
        </div>
      )}
    />
  );
}

Key capabilities:

Timeline view with resources as rows
Month, Week, and Day views for resource scheduling
Drag and drop events between resources and time slots
Cross-resource events using resourceIds array
Custom resource rendering with colors and styling
Works seamlessly with recurring events and all calendar features

That's it for major new features! v1.0.0 is primarily about bringing Resource Calendar to production along with various improvements and refinements throughout the library.

Powerful Features (Quick Reminder)

If you haven't tried ilamy Calendar yet, here's what it already had before v1.0.0:

RFC 5545 Recurring Events

Full RRULE support powered by rrule.js:

Daily, weekly, monthly, yearly patterns
Complex rules (last Friday of month, every 2 weeks, etc.)
Exception dates (EXDATE) and modified instances
Proper timezone handling
Compatible with Google Calendar, Outlook, and other iCalendar apps

Drag & Drop

Intuitive interactions across all views:

Move events between dates and time slots
Resize events to change duration
Collision detection
Smooth animations

Multiple Views

Four built-in views:

Month - Traditional calendar grid
Week - 7-day timeline with hourly slots
Day - Single day with full detail
Year - Annual overview

Internationalization

100+ locales via dayjs
Configurable week start day
Full timezone support
Proper date/time formatting per locale

Complete Styling Control

Zero CSS shipped by default
Bring your own design system
Tailwind CSS integration
Custom event rendering
CSS variables for theming

iCalendar Export

RFC 5545 compliant .ics file generation
Export events to Google Calendar, Outlook, Apple Calendar
Proper recurring event handling in exports

Upgrading to v1.0.0

Good news! v1.0.0 is fully backward compatible. If you're already using ilamy Calendar, upgrading is seamless:

npm install @ilamy/calendar@latest
# or
yarn upgrade @ilamy/calendar
# or
pnpm update @ilamy/calendar
# or
bun update @ilamy/calendar

What you get:

✅ All existing code continues to work
✅ Access to the new Resource Calendar component
✅ Slightly smaller bundle size
✅ Performance improvements under the hood
✅ No breaking changes

To use the new Resource Calendar:

// Just import the new component - everything else stays the same!
import { IlamyResourceCalendar } from '@ilamy/calendar';
import type { Resource, ResourceCalendarEvent } from '@ilamy/calendar';

// Your existing IlamyCalendar usage remains unchanged

That's it! No migration required, just upgrade and optionally start using the new Resource Calendar when you need it.

Real-World Use Cases

Since the initial release, developers have been using ilamy Calendar for:

🏢 Enterprise Apps

Meeting room booking systems
Employee scheduling platforms
Project timeline management

🏥 Healthcare

Patient appointment systems
Doctor availability calendars
Facility resource management

📚 Education

Class schedules
Assignment calendars
Resource booking (labs, equipment)

🎫 Events & Hospitality

Venue booking systems
Event planning tools
Restaurant reservation systems

💼 Professional Services

Client appointment scheduling
Consultant availability
Service booking platforms

What's Next?

Future Ideas:

Agenda/List view for events
Print-friendly layouts
Conflict detection UI
Mobile gesture support
Improved accessibility (ARIA, keyboard nav)
Virtual scrolling for massive event lists
Native integrations (Google Calendar, Outlook)
Recurring event templates
Event templates and presets
Advanced search and filtering

Community & Support

Thank you to everyone who:

⭐ Starred the repo (44 stars and counting!)
🐛 Reported bugs and issues
💡 Suggested features
📖 Improved documentation
🔧 Contributed code

Get involved:

If you found this useful, consider giving the project a ⭐ on GitHub. Every star helps more developers discover the project!

DEV Community