SyncfusionExamples · VengateshManiraj · Jan 29, 2026 · Jan 14, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/Gemfile b/Gemfile
@@ -4,18 +4,18 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 ruby "3.2.2"
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
-gem "rails", "~> 7.0.6"
+gem "rails", "~> 8.1.2"
 
 # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
 gem "sprockets-rails"
 
 # Use sqlite3 as the database for Active Record
-gem "sqlite3", "~> 1.4"
+gem "sqlite3", "~> 2.9.0"
 
 gem 'webpacker', '~> 5.x.x'
 
 # Use the Puma web server [https://github.com/puma/puma]
-gem "puma", "~> 5.0"
+gem "puma", "~> 7.2.0"
 
 # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
 gem "importmap-rails"

diff --git a/Output.png b/Output.png
diff --git a/Output/output.png b/Output/output.png
diff --git a/README.md b/README.md
@@ -1,30 +1,71 @@
-# javascript-scheduler-ruby-rails-application
+<!--
+  howto.md
+  A step-by-step guide to integrate Ruby on Rails with Syncfusion TS Scheduler
+-->
+# How to Integrate Ruby on Rails with Syncfusion Scheduler
+This repository contains a sample full-stack application demonstrating how to display events in syncfuison Scheduler component using Ruby on Rails.
 
 ## Prerequisites
+- Ruby - (3.2.2)
+- Node JS - (>=18.13.0)
+- Yarn - (>=1.22.19)
 
-Ruby - 3.2.2
-Node Js - 18.13.0
-Yarn - 1.22.19
-
-## Ruby setup
-
-You can install the Ruby from the following link.
-[`https://www.ruby-lang.org/en/downloads/`](https://www.ruby-lang.org/en/downloads/) 
-
-## Install Rails
-
+## Project Structure
 ```
-gem install rails
+├── README.md                  # This guide
+├── postcss.config.js
+├── package.json                  
+├── test       #Testing the functionality      
+│   ├── events_controller_test.rb  
+│   ├── schedule_controller_test.rb
+└── app 
+     ├── javascript   #Main JavaScript entry point that initializes frontend behavior
+     │   ├── application.js
+     │   ├── controllers
+     │   │   ├── index.js
+     └── views
+         ├── layouts
+         │   ├── application.html.erb  #Base HTML layout wrapping all views
+         └── welcome
+             └── index.html.erb  # View template for the welcome page
 ```
 
-## Add Syncfusion Scheduler component in your application
+## Project Setup
+## Installation
+1. ### Clone the project
+    Clone the project from the repository by creating a fork and branch.
+2. ### Ruby setup
+    You can install the Ruby from the following link.
+    [`https://www.ruby-lang.org/en/downloads/`](https://www.ruby-lang.org/en/downloads/) 
+    Then Install gem using below commands
+    ```
+    gem install rails
+    ```
+3. ### Install dependencies:
+   	```bash
+    npm install
+        or
+    yarn install
+    ```
+### Running the Application
+1. Navigate to javascript-scheduler-ruby-rails-application folder.
+    ```bash
+    cd javascript-scheduler-ruby-rails-application
+    ```
+2. Start the Scheduler Frontend
+    ```bash
+    rails server
+    ```
+3. Navigate to `http://localhost:3000` in your browser. (or) Ctrl + click the link in your terminal
 
-Refer the following UG documenation for adding Syncfusion React component in your application
-* [Getting Started of Syncfusion Javascript Scheduler component](https://ej2.syncfusion.com/javascript/documentation/schedule/getting-started)
 
-## Run the project
+## Output
+![Frontend Preview](./Output/output.png)
 
-```
-yarn install
-rails server
-```
+## Troubleshooting
+- **Version error**: Check and install the current version as by prerequistes.
+- **Port already in use**: Clear all the previous running applications in both browser and command prompt.
+
+## Liscense
+**License banner**: Obtain and register a Syncfusion license key [link](https://ej2.syncfusion.com/angular/documentation/licensing/overview).
+
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
@@ -1,23 +1,23 @@
 <section>
-    <script src="https://cdn.syncfusion.com/ej2/22.1.38/dist/ej2.min.js" type="text/javascript"></script>
-    <link href="https://cdn.syncfusion.com/ej2/22.1.38/material.css" rel="stylesheet">
+    <script src="https://cdn.syncfusion.com/ej2/32.1.24/dist/ej2.min.js" type="text/javascript"></script>
+    <link href="https://cdn.syncfusion.com/ej2/32.1.24/material.css" rel="stylesheet">
 </section>
 <section>
     <div id="Schedule"></div>
     <script>
         var scheduleObj = new ej.schedule.Schedule({
             height: '550px',
             width: '100%',
-            selectedDate: new Date(2023, 6, 13),
+            selectedDate: new Date(2026, 0, 22),
             eventSettings: {
                 dataSource: [{
-                    id: 1,
-                    subject: 'Meeting',
-                    startTime: new Date(2023, 6, 13, 10, 0),
-                    endTime: new Date(2023, 6, 13, 12, 30)
+                    Id: 1,
+                    Subject: 'Meeting',
+                    StartTime: new Date(2026, 0, 22, 10, 0),
+                    EndTime: new Date(2026, 0, 22, 12, 30)
                 }]
             }       
         });
         scheduleObj.appendTo('#Schedule');
     </script>
-</section>
+</section>
diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -67,4 +67,12 @@
 
   # Uncomment if you wish to allow Action Cable access from any origin.
   # config.action_cable.disable_request_forgery_protection = true
+  Rails.application.configure do
+  # ...other settings...
+
+  # Force Sprockets to keep its cache in memory in dev
+  config.assets.configure do |env|
+    env.cache = Sprockets::Cache::MemoryStore.new
+  end
+end
 end
diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
 "dependencies": {
   "@rails/webpacker": "5.4.4",
-  "@syncfusion/ej2-schedule": "^22.1.38",
-  "webpack": "^5.88.0",
-  "webpack-cli": "^5.1.4"
+  "@syncfusion/ej2-schedule": "*",
+  "webpack": "^5.104.1",
+  "webpack-cli": "^6.0.1"
 },
 "devDependencies": {
-  "webpack-dev-server": "^5.2.1"
+  "webpack-dev-server": "^5.2.3"
   }
 }