how to turn fullcalendar into a historical calendar? - fullcalendar

I would like to use full calendar as an author's assistant. That means, at the least, the user should be able to pass an arbitrary date variable (<% #hdate = 'yyyy-mm-dd' %>) and the full calendar app would use #hdate as the date-today. Is this possible? Where would that variable need to be used, in the view, controller, ??
I am basically using the code from Drifting Rails #42 FullCalendar episode. This is full_calendar.js
var initialize_calendar;
initialize_calendar = function() {
$('.calendar').each(function(){
var calendar = $(this);
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'prevYear, title, nextYear',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: '/events.json',
select: function(start, end) {
$.getScript('/events/new', function() {
$('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"))
date_range_picker();
$('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
});
calendar.fullCalendar('unselect');
},
eventDrop: function(event, delta, revertFunc) {
event_data = {
event: {
id: event.id,
start: event.start.format(),
end: event.end.format()
}
};
$.ajax({
url: event.update_url,
data: event_data,
type: 'PATCH'
});
},
eventClick: function(event, jsEvent, view) {
$.getScript(event.edit_url, function() {
$('#event_date_range').val(moment(event.start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(event.end).format("MM/DD/YYYY HH:mm"))
date_range_picker();
$('.start_hidden').val(moment(event.start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(event.end).format('YYYY-MM-DD HH:mm'));
});
}
});
})
};
$(document).on('turbolinks:load', initialize_calendar);
This is the visitor.html.erb file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "Template" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Template" %>">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<header>
<%= render 'layouts/navigation' %>
</header>
<main role="main">
<div class='container'>
<%= render 'layouts/messages' %>
<div class="calendar"></div>
<div id='remote_container'></div>
</div>
</main>
Again, I want to be able to modify the calendar defaultDate outside of the assets/../../full_calendar.js container, so that I don't have the problem of needing to precompile to run in production mode.

Related

Can I format excel column after exporting using table export jquery plugin with bootstrap table

I am using bootstrap table to display some data in my web application. https://bootstrap-table.com/ and I want to put an export feature in. The docs say to use https://github.com/hhurz/tableExport.jquery.plugin so I have added this to my imports and made the necessary code changes. Within the docs for this it says you can specify a format for the cells you are exporting by applying optional html data attributes while generating the table but how do I do this if my table is generated using bootstrap-table. I can't seem to work it out.. I basically need to the html data attribute data-tableexport-msonumberformat="0" to a set of td's generated by my bootstrap-table javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/webjars/bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script type="text/javascript" src="/webjars/bootstrap/4.5.3/js/bootstrap.min.js"></script>
<link href="/webjars/bootstrap-table/1.16.0/bootstrap-table.css" rel="stylesheet"></script>
</head>
<body class="bg-light">
<button id="exportExcelBtn" class="btn btn-sm btn-success" type="button">
Export
</button>
<table id="table"></table>
<script src="/webjars/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="/webjars/bootstrap-table/1.16.0/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary"
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true,
**tableExport: {msoNumberFormat: '0'}**
}
})
});
</script>
</body>
</html>
https://github.com/himingby/tableExport.jquery.plugin/blob/master/test/index.html
could you try this below?
<script type="text/javascript">
function DoOnMsoNumberFormat(cell, row, col) {
var result = "";
if (row > 0 && col === 0)
result = "\\#";
else if (row > 0 && col === 2)
result = "0"; // #issue 327: Preserve long numbers
return result;
};
$( document ).ready(function() {
$('#exportExcelBtn').on('click', function () {
$('#table').tableExport({
type: 'excel',
fileName: "Order Summary",
mso:{onMsoNumberFormat: DoOnMsoNumberFormat},
});
});
$('#table').bootstrapTable({
url: '/getTableData',
columns: [
{
field: 'orderNo',
title: 'Order No',
sortable: true
},
{
field: 'itemNo',
title: 'Item No',
sortable: true
}
})
});

how to link smartly the private javascript included into the manifest.json compiled by webpacker in Rails6

I tried to link private javascript code for jquery for my app in according to the way of Rails6. But, it has been not linked automaticaly like as Asset pilplene in Sprocket.
Actualy only application.js except other private js files on pacs directory is linked with "javascript_pack_tag 'application'" in the layout view.
So, I can be available by linking manualy the private javascript codes compiled in public/packs directory into the layout view.
*install JQuery
yarn add jquery
*app/javascript/packs/application/click_test.js
$(document).ready(function() {
$('h1').on('click', function() {
console.log('Wellcome to the World');
$(this).css('background-color', 'green');
$(this).css('color', 'white');
});
});
*config/webpacker.yml
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
.......
*config/webpack/development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
module.exports = environment.toWebpackConfig()
*app/javascript/packs/application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
*app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>JqueryTest</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
I changed code manualy as following, and jquery can work.
<!DOCTYPE html>
<html>
<head>
<title>JqueryTest</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script src="/packs/js/application/click_test-cc5b88be7c8ba2fc22b8.js" data-turbolinks-track="reload">
</script>
</head>
<body>
<%= yield %>
</body>
</html>
*public/packs/manifest.json
{
"aplication/click_test.js": "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js",
"aplication/click_test.js.map": "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js.map",
"application.js": "/packs/js/application-678a934fafa8cabf4c10.js",
"application.js.map": "/packs/js/application-678a934fafa8cabf4c10.js.map",
"entrypoints": {
"aplication/click_test": {
"js": [
"/packs/js/application/click_test-cc5b88be7c8ba2fc22b8.js"
],
"js.map": [
"/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js.map"
]
},
"application": {
"js": [
"/packs/js/application-678a934fafa8cabf4c10.js"
],
"js.map": [
"/packs/js/application-678a934fafa8cabf4c10.js.map"
]
}
}
}
In Rails6, I'd like to know the best way to link JQuery code smartly like sprocket automatically.
Thanks for advance
Files in the new for Rails 6 app/javascript/packs directory are treated as packs' entry point. So you should put click-test.js in (say) app/javascript/features directory and add to app/javascript/packs/application.js
import 'features/click-test'
By the way. When using Rails turbolinks, jQuery initialization code should be subscribed to turbolinks:load instead of document:ready

FullCalendar eventConstraint conflict with eventDataTransform function

I have a fullCalendar where event data comes from a JSON feed.
The field names do not match fullCalendar field names so I use the eventDataTransform function like this:
eventDataTransform: function (eventData){
var ro = new Object();
ro.start = eventData.myStartField;
ro.end = eventData.myEndField;
ro.title = eventData.myTitleField;
ro.sourceObject = eventData;
console.log("converted event", ro);
return ro;
}
I keep the original JSON object in a custom field 'sourceObject'.
This works perfect. No issues.
Until I add a constraint to fullCalendar:
eventConstraint: {start: "08:00:00", end: "16:00:00"}
From that moment on, every time I move an event or alter it's duration, the eventDataTransform function is triggered and all my events get a start and end value of undefined.
This is weird because a drag shouldn't trigger the eventDataTransform function at all.
Is this a bug or am I doing something wrong?
Thanks
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel='stylesheet' href='css/fullcalendar.min.css' />
<link href='css/scheduler.min.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/scheduler.min.js'></script>
<script>
$(document).ready(function() {
console.log("init");
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'agendaWeek',
weekends: false,
weekNumbers: true,
allDaySlot: false,
slotLabelFormat: 'H:mm',
nowIndicator: true,
selectable: true,
defaultDate: '2017-09-12',
editable: true,
eventConstraint: {start: "08:00:00", end: "16:00:00"},
eventDataTransform: function (eventData){
var ro = new Object();
ro.start = eventData.myStartField;
ro.end = eventData.myEndField;
ro.title = eventData.myTitleField;
ro.sourceObject = eventData;
console.log("converted event", ro);
return ro;
},
events: [
{
myTitleField: 'Long Event',
myStartField: '2017-09-07',
myEndField: '2017-09-10'
},
{
myTitleField: 'Meeting',
myStartField: '2017-09-12T10:30:00',
myEndField: '2017-09-12T12:30:00'
},
{
myTitleField: 'Lunch',
myStartField: '2017-09-12T12:00:00'
},
{
myTitleField: 'Meeting',
myStartField: '2017-09-12T14:30:00'
},
{
myTitleField: 'Happy Hour',
myStartField: '2017-09-12T17:30:00'
}
]
});
});
</script>
</head>
<body>
<div id="calendar" class="container">
</div>
</body>
</html>

treegrid example doesn't work

I'm trying to run the treegrid example but it only gives me the grid with no data in it!
this is my default.aspx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My tree grid</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs4/ext-all.js"></script>
<!-- example code -->
<script type="text/javascript" src="Scripts/treepanel.js"></script>
</head>
<body>
<h1>My tree grid</h1>
<div id="tree-div"> </div>
this is my treepanel.js
Ext.Loader.setConfig({ enabled: true }); //
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel'
]);
Ext.onReady(function ()
{
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'treegrid.json'////
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-div',
rootVisible:true,
store: store,
autoload:true,
columns: [{xtype: 'treecolumn', text: 'Task', dataIndex: 'task' },{text: 'Assigned To', dataIndex: 'user'}]
});
});
am I doing something wrong here?
I have no error msg from my firebug...so why isn't it working?
if I can't run an example how am I going to do more..I'm frustrated with this.
not sure, but the "autoLoad: true" is now on the panel, but shouldn't it be on the store?
Install PHP and do the following in IIS:
click on the new site
click on MIME types
right click in open space > Add > File name extension: "json" ... MIME Type: "application/x-javascript"
Adding more details:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858

jqueryui calendar does not render after upgrading project

After upgrading my project from ASP.NET MVC2 to MVC3, simply calendar partial view no longer renders. The code for this view is listed below.
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AkwiMemorial.Models.CalendarModel>" %>
<link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
$('#DateStr').val(dateText);
$('form').trigger('submit'); }});
});
</script>
<% using (Html.BeginForm()) { %>
<div>
<div id="datepicker"></div>
<%= Html.HiddenFor(x => x.DateStr)%>
</div>
<% } %>
Any ideas? TIA.
Edit 1:
To see if this is a problem with my original project, I modified Home/Index view on a new MVC3 project as shown below. When I execute, I get error "Microsoft JScript runtime error: Object doesn't support this property or method". This is using jquery-1.5.1.min.js.
#model DateTime
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
#using ( Html.BeginForm())
{
#Html.TextBox("datepicker", Model.ToString("dd/MM/yyyy"), new { #class = "date" });
<input id="submit" name="submit" type="submit" value="Save" />
}
Why is this not working?
** Edit 2: **
Got jquery calendar to display in MVC3 using the following partial view:
#model DateTime
#using (Html.BeginForm())
{
<div id="datepicker">
#Html.TextBox("date", Model.ToString("dd/MM/yyyy"), new { #class = "date" })
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
inline: true,
onSelect: function (dateText, inst) {
$('#date').val(dateText);
$('form').trigger('submit');
}
});
});
</script>
Now back to the original problem.
I had the same problem and it fixed by upgrading to the latest version of jquery UI and jquery.
Without more info, my guess is that problem is with the nested div's. The default css of the browser could be playing a part here. Trying setting z-index of the datepicker div to a higher value.

Resources