Version 6.1.8
1. in /app/admin/calendars.rb: Create new model and create new record(Calendar.create()): must have at least one record created
ActiveAdmin.register BxBlockCalendar::Calendar, as: 'Calendar' do
actions :index
config.filters = false
index do
render 'index'
end
end
--------------------------------------
2. in /app/views/admin/calendars/_index.html.erb
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
navLinks: true,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
{
url: '/accounts/calendar_event.json',
method: 'GET',
extraParams: {
clinician: '<%= params[:clinician] %>',
status: '<%= params[:status] %>',
appt_type: '',
view_type: 'list'
},
success: function() {
$(".ajax-loading").hide();
},
failure: function() {
$(".ajax-loading").hide();
alert('there was an error while fetching events!');
}
}
],
});
calendar.render();
});
</script>
-------------------------------------
3. in routes.rb
get "calendar_event", to: "events#calendar_event"
-------------------------------------------------
4. in /app/controllers/events_controller.rb
def calendar_event
events = Event.where("start_date BETWEEN ? AND ? OR end_date BETWEEN ? AND ? ", params[:start].to_date.beginning_of_day, params[:end].to_date.end_of_day, params[:start].to_date.beginning_of_day, params[:end].to_date.end_of_day)
events = events.map{|k,v| {
title: k&.title,
start: k&.start_date,
end: k&.end_date,
}}
render json: events
end
=============================================================
Version 3.9.0 with gem
https://medium.com/@a01700666/fullcalendar-in-ruby-on-rails-f98816950039
https://codepen.io/pen?editors=0110
1. In Gemfile
gem 'fullcalendar-rails'
gem 'momentjs-rails'
bundle install
--------------------------------------------------
2. In /app/assets/javascripts/active_admin.js
//= require moment
//= require fullcalendar
--------------------------------------------------
3. In /app/assets/stylesheets/active_admin.scss
@import "fullcalendar";
css fille hai to
*= require fullcalendar
---------------------------------------------------------------
4. In /app/views/admin/calendars/_index.html.erb
<div id="calendar"></div>
<script type="text/javascript">
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [
{
url: '/accounts/calendar_event.json',
method: 'GET',
extraParams: {
clinician: '<%= params[:clinician] %>',
status: '<%= params[:status] %>',
appt_type: '',
view_type: 'list'
},
success: function() {
$(".ajax-loading").hide();
},
failure: function() {
$(".ajax-loading").hide();
alert('there was an error while fetching events!');
}
}
],
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, '_blank', 'width=700,height=600');
return false;
}
});
});
</script>
----------------------------------------------------------
5. in /app/admin/calendars.rb: Create new model and create new record(Calendar.create()): must have at least one record created
ActiveAdmin.register BxBlockCalendar::Calendar, as: 'Calendar' do
actions :index
config.filters = false
index do
render 'index'
end
end
6. in routes.rb
get "calendar_event", to: "events#calendar_event"
-------------------------------------------------
7. in /app/controllers/events_controller.rb
def calendar_event
events = Event.where("start_date BETWEEN ? AND ? OR end_date BETWEEN ? AND ? ", params[:start].to_date.beginning_of_day, params[:end].to_date.end_of_day, params[:start].to_date.beginning_of_day, params[:end].to_date.end_of_day)
events = events.map{|k,v| {
title: k&.title,
start: k&.start_date,
end: k&.end_date,
}}
render json: events
end
-----------------------------------------------------------
https://github.com/mkhairi/fullcalendar
No comments:
Post a Comment