Simple Calendar

You can create entirely custom calendars (e.g., a business week calendar) by inheriting from SimpleCalendar::Calendar. You must implement the date_range method to define the custom length.

Example: Business Week Calendar

class SimpleCalendar::BusinessWeekCalendar < SimpleCalendar::Calendar
  private

    def date_range
      beginning = start_date.beginning_of_week + 1.day
      ending    = start_date.end_of_week - 1.day
      (beginning..ending).to_a
    end
end

Rendering the custom calendar:

<%= render SimpleCalendar::BusinessWeekCalendar.new(self, events: meetings) do |date| %>
  <%= date %>
<% end %>

Note: This will look for a partial named app/views/simple_calendar/_business_week_calendar.html.erb.

You can control how dates are computed by setting global or request-specific configurations.

Global Configuration (config/application.rb):

config.time_zone = 'Central Time (US & Canada)'
config.beginning_of_week = :sunday

Request-specific (e.g., via before_action in ApplicationController):

class ApplicationController < ActionController::Base
  before_action :set_time_zone, if: :user_signed_in?

  private

    def set_time_zone
      Time.zone = current_user.time_zone
    end
end

# config/application.rb
config.time_zone = 'Central Time (US & Canada)'
config.beginning_of_week = :sunday

To render events (like meetings) within a calendar, follow these steps:

1. Model Setup: Ensure your model has a start time attribute. By default, it looks for start_time. If your attribute is named differently, pass it via the attribute option. For multi-day events, provide an end_attribute.
2. Controller: Query the events for the relevant date range and store them in an instance variable.
3. View: Pass the events to the calendar method using the events: option. The gem will automatically filter the events for each day yielded in the block.

Example with custom attributes:

<%= month_calendar(attribute: :start_date, end_attribute: :end_date, events: @meetings) do |date, meetings| %>
  <%= date %>
  <% meetings.each do |meeting| %>
    <div><%= meeting.name %></div>
  <% end %>
<% end %>

Add simple_calendar to your Gemfile and run bundle install.

If you are using Bootstrap, the calendar should already have appropriate spacing and borders. Optionally, you can include the default stylesheet in your application assets.

gem "simple_calendar"

To modify the HTML structure of the calendars, run the following generator to create editable partials in app/views/simple_calendar:

$ rails g simple_calendar:views

The default views support translation lookups for month names and weekdays. To use this, ensure you have rails-i18n configured and define the following keys in your locale files:

# e.g. config/locales/de.yml
de:
  simple_calendar:
    previous: "<<"
    next: ">>"
    week: Woche

To use the default styles, include the stylesheet in your CSS or SCSS files.

For CSS (app/assets/stylesheets/application.css):

*= require simple_calendar

For SCSS (app/assets/stylesheets/application.scss):

@import "simple_calendar";

To make calendars update without a full page reload:

Using Hotwire (Turbo): Wrap the calendar in a turbo_frame_tag:

<%= turbo_frame_tag 'calendar' do %>
  <%= month_calendar do |date| %>
    <%= date.day %>
  <% end %>
<% end %>

Using AJAX:

1. Generate views: rails g simple_calendar:views.
2. Add an ID to the outer div: <div id="calendar" class="simple-calendar">.
3. Add remote: true to the next/previous links.
4. Create a js.erb response to replace the calendar div by ID.

Use the month_calendar method to render a calendar for the current month. The first parameter is a symbol that looks up the current date in params (defaults to :start_date). If no date is found in params, it uses the current date.

To show only the day of the month, use date.day inside the block.

<%= month_calendar do |date| %>
  <%= date %>
<% end %>

You can customize how the calendar behaves via options:

• start_date_param: Change the name of the parameter in the URL used to look up the current date (e.g., :my_date).
• partial: Specify a custom partial path for the calendar rendering.

# Custom parameter name
<%= calendar(start_date_param: :my_date) do |date| %>
  <%= date %>
<% end %>

# Custom partial
<%= calendar(partial: 'products/calendar') do |date| %>
  <%= date %>
<% end %>

Use the week_calendar method to render a week view. You can optionally specify the number of weeks to display using the number_of_weeks option (defaults to 1).

<%= week_calendar(number_of_weeks: 2) do |date| %>
  <%= date %>
<% end %>

Use the calendar method to render a range of any size by passing the number_of_days option (defaults to 4).

<%= calendar(number_of_days: 4) do |date| %>
  <%= date %>
<% end %>