I'm tweaking the titleFormat to get Friday, April 21, 2017 but I'm getting strange results:
dddd renders Friday
LL renders April 21, 2017
But putting both together, dddd LL, renders as Friday, April 21, 2017 – April 21, 2017
What am I missing?
$(function() {
$("#c1").fullCalendar({
height: 100,
defaultView: "agendaDay",
allDaySlot: false,
titleFormat: "dddd"
});
$("#c2").fullCalendar({
height: 100,
defaultView: "agendaDay",
allDaySlot: false,
titleFormat: "LL"
});
$("#c3").fullCalendar({
height: 100,
defaultView: "agendaDay",
allDaySlot: false,
titleFormat: "dddd LL"
});
});
<link href='https://fullcalendar.io/js/fullcalendar-3.3.1/fullcalendar.css' rel='stylesheet' />
<link href='https://fullcalendar.io/js/fullcalendar-3.3.1/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://fullcalendar.io/js/fullcalendar-3.3.1/fullcalendar.js'></script>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
It's apparently a bug in the library (#3645).
Related
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>
Unable to implement FullCalendar into ASP.NET MVC4 application getting: 0x800a138f - Microsoft JScript runtime error: Object expected
I got the code from the website but am getting the above error. Here is the code:
{
ViewBag.Title = "Calendar";
}
<link rel='stylesheet' href='Content/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<h2>Calendar</h2>
<div id="calendar" style="width:65%"></div>
<script type="text/javascript">
$(document).ready(function () {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaDay',
editable: true,
allDaySlot: false,
selectable: true,
slotMinutes: 15,
// put your options and callbacks here
})
});
</script>
All of the files exist as I installed the NuGet packages.
After much frustration I finally got the search icon to appear in the navigator area but now when I click on it the screen turns "modal" but no search dialog appears!
Here's the head section of my code:
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<link href="../Styles/Examiners.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/searchFilter.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jqgrid/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.addons.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.postext.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/grid.setcolumns.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.contextmenu.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.tablednd.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/ui.multiselect.js" type="text/javascript"></script>
<script src="../Scripts/jqgrid/jquery.searchFilter.js" type="text/javascript"></script>
</asp:Content>
And here's my grid definition
$("#examinersGrid").jqGrid({
url: baseUrl() + selectQuery(),
mtype: "POST",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
datatype: 'json',
colNames: ["Name", "Assignments"],
colModel: [
{ name: 'displayName', index: 'displayName', width: 200, },
{ name: 'assignments', index: 'assignments', width: 120,
formatter: 'integer', sorttype: 'int', align: 'right'
}
],
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records",
id: "examinerID"
},
autowidth: true,
height: "auto",
rowNum: 10,
loadonce: false,
gridview: true,
pager: "#examinersPager",
search: {
caption: "Search...",
Find: "Find",
Reset: "Reset",
odata: ['equal', 'not equal', 'less', 'less or equal', 'greater', 'greater or equal', 'begins with', 'does not begin with', 'is in', 'is not in', 'ends with', 'does not end with', 'contains', 'does not contain'],
groupOps: [{ op: "AND", text: "all" }, { op: "OR", text: "any"}],
matchText: " match",
rulesText: " rules"
},
rowList: [10, 20, 30],
sortname: "displayName",
sortorder: "asc",
viewrecords: true,
autoencode: true,
}).navGrid('#examinersPager', { add:false, edit: false, del: false, refresh: false, search: true });
});
Any ideas? I'm tearing my hair out here!
It's quite simple, really... I'm not sure what triggered it.
The solution was to move my jquery.jqGrid.src.js reference below all
the plugin references above it.
Sigh. So it's that old javascript gotcha of making sure the script references come in the right order.
I am trying to get the C3.js code below:
<link href="well.css" rel="stylesheet" type="text/css">
<link href=#Url.Content("c3.css") rel="stylesheet" type="text/css">
<script src=#Url.Content("d3.js") charset="utf-8"> </script>
<script src=#Url.Content("c3.js")> </script>
#* Chart holder for C3JS display *#
<div> <span id="chart"></span></div>
<script charset="utf-8" type="text/javascript">
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
</script>
to display in a Razor rendered view under MVC.NET.
Have you any ideas why it does not display a graph anything?
Thanks and cheers
Mike
In IE9, every click in certain place in form increases form height.
I used Oleg jqGrid sample for create testcase.
Steps to reproduce:
Open page below in Internet Explorer 9
Click in first row in text 'clicking me increases form height' so that it becomes yellow
click in view record button in lower left corner
click in 'clicking me increases form height' text in form
Observed:
Every click increases form height in Internet Explorer 9.
How to fix this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>how to center jqGrid popup modal window?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
<!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var mydata = [
{id:"2",invdate:"2007-10-02",name:"clicking me increases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
{name:'name',index:'name', width:100, editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: { wrap : "on",
style : "width:30px"
}
},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Custom Navigation to Top Toolbar"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true},
{ beforeShowForm: function(form) {
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>
</body>
</html>
Yes Andrus, it's exactly the same IE9 bug which reference I posted you today: this bug report. The bug was fixed in the main grid in jqGrid 4.0, but you found one more place where exactly the same problem exist.
To fix the problem I suggest the following. In the View form where the error take place we test whether the value of height of the form is 'auto' and the code run under IE9. In the case we will change the setting height: 'auto' to height: '100%':
grid.jqGrid('navGrid', '#pager', {view: true}, {}, {}, {}, {},
{
beforeShowForm: function ($form) {
if ($.browser.msie && $.browser.version.slice(0,3) === '9.0' &&
$form[0].style.height === 'auto') {
$form[0].style.height = '100%';
}
}});
See the demo demonstrate the bug fix (here one can test the bug in IE).
UPDATED: I looked in the source code of viewGridRow and found more easy workaround. One should just use (see the demo)
{ dataheight: '100%' }
setting instead of default dataheight: 'auto' setting. By the way I didn't found in the code of jqGrid any place where the height parameter will be used. It seems, that one should now use dataheight parameter instead.
If I would find enough time I would post the bug to Microsoft as the official support request. My previous expiration was always the same: MS confirmed the bug as confirmed that my request was for free: I don't have to pay for the request. On the other side to create the clear example and to describe the problem one need time. So I should invest my time and "for free". Moreover the bug will be typically not fixed in the current product (IE9) and will be probably fixed in the next version of IE (IE10). In such situation the writing of the bug reports is not really attractive. :-)