Menu
I want to run the fullcalendar on my rails project. I am following the steps in https://github.com/bokmann/fullcalendar-rails but I am having an error.
the calendar only shows properly as in this view http://fullcalendar.io/js/fullcalendar-2.2.6/demos/basic-views.html when I call everything from my application.html.erb page like this
<!DOCTYPE html>
<html>
<head>
<title>LetsScheduleComMy</title>
<%= csrf_meta_tags %>
<meta charset='utf-8' />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta content="05DB4EB1125C9BB77659AD0ADC8E0BAC" name="msvalidate.01">
<link href='/assets/fullcalendar.css' rel='stylesheet' />
<link href='/assets/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='/assets/moment.min.js'></script>
<script src='/assets/jquery.min.js'></script>
<script src='/assets/fullcalendar.min.js'></script>
<script>
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
But whenever i try to make it dynamic rails way, it doesnt run properly. So in my application.js file
//= require jquery
//= require moment.min
//= require jquery.min
//= require fullcalendar.min
//= require_tree .
and in my application.css.scss file
*= require_tree
*= require_self
and in my application.html.erb file
<!DOCTYPE html>
<html>
<head>
<title>LetsScheduleComMy</title>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= javascript_include_tag 'application'%>
<%= csrf_meta_tags %>
<meta charset='utf-8' />
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta content="05DB4EB1125C9BB77659AD0ADC8E0BAC" name="msvalidate.01">
<script>
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
});
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
Kindly note that the only difference here is i have put the required css and javascript files in my application.js and application.css files and added the javascript nd stylesheets tags in my application.html.erb file as recommended by rails. But then it seems fullcalendar doesnt accept rails way of implementation.
Is there anything that can be done?
Thanks
288
The area at the top and bottom of the calendar that contains buttons and other controls. Defines the buttons and title at the top of the calendar. Defines the controls at the bottom of the calendar. Determines the text that will be displayed in the headerToolbar’s title.
While this technique is rather simple to implement, it is brittle because if fullcalendar adjusts its CSS statements in future versions, you might need to adjust your CSS as well. It’s possible to customize fullcalendar’s CSS in a more surgical way.
It’s possible to manually include the necessary <script> tags in the head of your HTML page and then initialize a calendar via browser globals. You will leverage one of FullCalendar’s prebuilt bundles to do this. First, obtain the standard fullcalendar bundle in one of the following ways: Then, write the following initialization code:
FullCalendar’s CSS source code was originally written with custom CSS properties, aka “CSS variables”. These variables are compiled down to plain CSS statements that all supported browsers can understand. However, fullcalendar also leaves these variables in the compiled CSS code for you to override.
Try removing fullcalendar.print.css... it fixed the issue for me.
64
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
