diff --git a/Output.png b/Output.png new file mode 100644 index 0000000..be6e1f9 Binary files /dev/null and b/Output.png differ diff --git a/README.md b/README.md index 63a9384..b9282c0 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,71 @@ -# javascript-scheduler-ruby-rails-application + +# 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.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). + \ No newline at end of file diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 8e7b785..92edf5b 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -1,6 +1,6 @@
- - + +
@@ -8,16 +8,16 @@ 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'); -
\ No newline at end of file + diff --git a/package.json b/package.json index 63882e8..501c305 100644 --- 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" } }