Is it possible to display two/three months?
Even I wanted the same and did something like this.
<table width="100%" cellpadding="5" cellspacing="5">
<tr>
<td>
</td>
<td>
<input type="button" id="myprevbutton" value=" ◄ " />
<input type="button" id="mynextbutton" value=" ► " />
</td>
<td>
</td>
</tr>
<tr>
<td width="33%">
<div id='calendar0'>
</div>
</td>
<td width="33%">
<div id='calendar1'>
</div>
</td>
<td width="33%">
<div id='calendar2'>
</div>
</td>
</tr>
</table>
and in JS
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar0').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
month:m-1,
theme: true,
});
$('#calendar2').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
month:m+1,
theme: true,
});
$('#calendar1').fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
theme: true,
editable: false,
});
$('#myprevbutton').click(function() {
$('#calendar0').fullCalendar('prev');
$('#calendar1').fullCalendar('prev');
$('#calendar2').fullCalendar('prev');
});
$('#mynextbutton').click(function() {
$('#calendar0').fullCalendar('next');
$('#calendar1').fullCalendar('next');
$('#calendar2').fullCalendar('next');
});
});
TL;DR
Cannon has posted a modified FullCalendar which allows a calendar to span across more than one month, however this seems to run all the months into eachother, and is bound to an earlier version of FullCalendar.
Here's my take on 3 separate calendars, which hides the navigation on two calendars and synchronizes the months on the main calendar: jsFiddle
Details
Set up the 3 calendars - in my case the main calendar with smaller 'look behind / look ahead' calendars to the next and previous months:
<div id='calendarPrev' style='width:50%'></div>
<div id='calendarCurrent' style='width:100%'></div>
<div id='calendarNext' style='width:50%'></div>
DRY up the calendar initialization with a function with optionally hides the navigation:
function initCalendar($calendarDiv, displayDate, isMain) {
$calendarDiv.fullCalendar({
defaultDate: displayDate,
header: {
left: 'title',
center: '',
right: isMain
? 'today prev,next'
: ''
},
events: ... eventdata callbacks etc
});
}
In the $(document).ready, set the initial date of the 3 calendars around today, but exactly 1 month apart, hiding the navigation on the two secondary calendars. Then wire additional event handlers on the 'main' calendar's next and prev buttons which keep the 3 calendars in synch:
$(document).ready(function() {
initCalendar($('#calendarCurrent'), moment(), true);
initCalendar($('#calendarPrev'), moment().subtract(1, 'months'), false);
initCalendar($('#calendarNext'), moment().add(1, 'months'), false);
$('body').on('click', 'button.fc-prev-button', function() {
$('#calendarPrev').fullCalendar('prev');
$('#calendarNext').fullCalendar('prev');
// allow main calendar event to propogate
});
$('body').on('click', 'button.fc-next-button', function() {
$('#calendarPrev').fullCalendar('next');
$('#calendarNext').fullCalendar('next');
// allow main calendar event to propogate
});
}
The documentation for FullCalendar should help you answer that (which is well documented, BTW). I found this doing a quick search for your answer.
EDIT: digging a tad further, I found this as well which indidcates it's not a primary feature but there are some things you can do to mimic what you want.
# John Smith -- I've created 3 calendars and so far it seems to be working for me but instead of dragging events, mines are just simply saving events title, start, end with the ability to edit them.
One alternative can be, show the required no of weeks in basicWeek view. It renders as a tab showing 2 Months.
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
views: {
basicWeek: {
type: 'basic',
duration: {weeks: 8},
rows: 8
}
}
}
With the team I work in, we came up with this solution (for Vue.js, but it can by applied to any version). You can have in a single calendar many months and they are differentiated from each other by the name of the month in the first day of it and by the background color. It works pretty well and, in contrast with the solution of having multiple instances of the calendar, here you can drag and drop events from one month to the other and create events that start in one month and end in the other.
https://github.com/fullcalendar/fullcalendar/issues/470#issuecomment-565542643
It looks like this:
Add to first, second and third months this:
defaultDate:'2016-07-01',
Related
I have a problem with FullCalendar in Laravel Nova Tool.
I've created the Tool and I can display the events in generated calendar. The problem is with the localisation and the height of the calendar. Here some code:
<template >
<div>
<FullCalendar
#dateClick="handleDateClick"
#eventClick="handleEventClick"
#eventMouseEnter="handleMouseEnter"
#eventMouseLeave="handleMouseLeave"
ref="fullCalendar"
:plugins="calendarPlugins"
:weekends="calendarWeekends"
:events="calendarEvents"
:config="{
locale: 'it', <============
height: '200'<========
}"
:header="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listWeek'
}"
/>
</div>
</template>
<script>
...
mounted() {
axios.get('/nova-vendor/fullcalendar/produzioni').then(response => {
//get the events
}
}
</script>
The config section is ignored, or is inserted in the wrong place.
Can you help me?
Thanks!
Roberto
So what I am trying to do here is that in the View,
when I click on the button, I want to pass some values generated from the foreach loop (in my case Country and City) to the javascript function.
Inside that javascript function, I want to open up a dialog(partial view) by passing those values (countryName, cityName) to the controller.
Hence in my controller, it will pass those values to the partial view which will be appeared as a dialog and can submit the form.
I've tried with the version without the pop-up dialog (it worked), but having a hard time doing it with a dialog. #3 works btw, but I think I am having a trouble with #1 and #2. Any help would be appreciated. Thanks.
View:
#model IEnumerable<test.Models.Employee>
<table class="table">
<tr>
<th>Country</th>
<th>City</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Country)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
<td>
<button onclick="OpenDialog(item.Country, item.City)">
Open Dialog
</button>
</td>
</tr>
}
</table>
<div id="dialog"></div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-ui-1.12.0.js"></script>
<script>
function OpenDialog(countryName, cityName) {
$('#dialog').dialog({
autoOpen: true,
width: 400,
resizable: false,
title: 'My Table',
modal: true,
open: function(event, ui) {
$(this).load('#Url.Action("getEmployee", "Employee", new
{
country = countryName,
city = cityName
})');
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
}
</script>
}
Controller:
public ActionResult getEmployee(string country, string city)
{
var viewModel = new EmployeeViewModel()
{
Country = country,
City = city
};
return PartialView("EmployeeDialog", viewModel);
}
Partial View:
#model test.ViewModels.EmployeeViewModel
#using (Html.BeginForm("PostEmployee", "Employee", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(model => model.Country)
#Html.HiddenFor(model => model.City)
#Html.EditorFor(model => model.Comments)
<input type="submit" value="Submit"/>
}
#Url.Action() is razor code and is parsed in the server before its sent to the view. countryName and cityName are javascript variables and do not even exist at that point (they are not in scope). Change the code in the OpenDialog() function to
var url = '#Url.Action("getEmployee", "Employee")';
var data = { country: countryName, city: cityName };
$(this).load(url, data);
As a side note, there is really no need to be calling the server each time to return values that you already have in the view. You could just render the form in the dialog initially (for a default EmployeeViewModel and then in the OpenDialog just set the values of the inputs for properties Country and City, for example $('#Country').val(countryName);
I am using inline editing with events. And on click of a non editable cell I want to open Rich Text Box. I tried using edittype: custom and returning the rte but nothing displays. Is there any other way to do this.
Please suggest!
Thanks,
Arshya
using edittype: custom makes no sense for a non-editable column. Make the column editable, by using editable: true
I was able to achieve this using the below solution
On load complete I added the code to open the div on cell click
loadComplete: function() {
var iColNotesPresent = getColumnIndexByName($(this), 'NotesPresent'), rows = this.rows, i, c = rows.length;
var iColNotes = getColumnIndexByName($(this), 'Notes');
for (i = 1; i < c; i += 1) {
$(rows[i].cells[iColNotesPresent]).click(function(e) {
var offset = jQuery(e.target).offset();
var rteText = $(jQuery(e.target).parent()[0].cells[iColNotes])[0].outerText;
var rowId = jQuery(e.target).parent()[0].id;
OpenRTEBox(offset, rteText, rowId);
});
}
},
//Open the div containing RTE
function OpenRTEBox(offset, rteText, rowId) {
isColNotes = true;
currsel = rowId;
$('#rteDiv').css({ position: "absolute", top: offset.top, left: offset.left, "z-index": 20 });
$('#rteDiv').show();
frames['rte0'].document.body.innerHTML = rteText;
}
Here is the html code for RTE
<script language="javascript" type="text/javascript">
writeRichText("rte0", "rte0", 575, 200, true, false, "Notes");
</script>
</td>
</tr>
<tr>
<td align="right">
<input type="button" id="btnOK" onclick="addNotes();" value="OK"/>
</td>
<td align="left">
<input type="button" id="btnCancel" onclick="closeDiv();" value="Cancel"/>
</td>
</tr>
</table>
</div>
Hi Friends i am trying to use knockoutjs on one of my web pages in mvc
razor. From the following ViewModel i am achieving the "ADD MORE"
functionality.But My Problem is that how can we achieve the following
functionality:
(1) The second dropdown should be invisible when the dropdown for
"Type of Tobacco" is selected to "Choose..."
(2)When we choose some other value (other than "Choose") second
dropdown should be populated containing value 1 to 10....
(3) When we select "Others" instead of drop down a textbox should
appear
HERE IS MY ATTEMPT:
<script src="#Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/knockout-2.1.0.js")" type="text/javascript"></script>
<script type="text/html" id="ddlSelection">
<div><select></select> yrs.</div>
<div><input type="text" data-bind=""></input></div>
</script>
<div id="container">
#*<div data-bind="template:{name:'smoker'}"></div>*#
<table cellpadding="3" cellspacing="4">
<tbody data-bind="foreach: seats">
<tr>
<td>
Type of Tobacco/Nicotine consumed :
</td>
<td>
<select data-bind="options: $root.availabledrugs, value: Drug, optionsText: 'DrugName'"></select>
</td>
<td><select></select></td>
</tr>
<tr>
<td>
Quantity : <input data-bind="value: Name" />
</td>
<td>
Frequency : <select data-bind="options: $root.availablefrequency, value: Frequency, optionsText: 'frequency'"></select>
</td>
<td data-bind="text: FormatPrice"></td>
</tr>
</tbody>
</table>
<button data-bind="click:AddConsumption">Add New One</button>
</div>
<script type="text/javascript">
function setconsumption(name, initdrug,initfrequency) {
var self = this;
self.Name = name;
self.Drug = ko.observable(initdrug);
self.Frequency = ko.observable(initfrequency);
self.FormatPrice = ko.computed(function () {
return self.Drug().Price ? "$" + self.Drug().Price.toFixed(2) : "none";
});
}
function ConsumptionViewModel() {
var self = this;
self.availabledrugs = [{ "DrugName": "Choose...", "Price": 0 },
{ "DrugName": "Cigarettes", "Price": 10 },
{ "DrugName": "Cigar", "Price": 20 },
{ "DrugName": "Others", "Price": 30}];
self.availablefrequency = [{ "frequency": "Choose..." }, { "frequency": "freq1" }, { "frequency": "freq2"}];
self.seats = ko.observableArray(
[new setconsumption("", self.availabledrugs[0], self.availablefrequency[0])]);
self.AddConsumption = function () {
self.seats.push(new setconsumption("", self.availabledrugs[0], self.availablefrequency[0]));
};
}
ko.applyBindings(new ConsumptionViewModel());
</script>
Its hard to guess for me that what you are trying to achieve. But i think you are looking for visible binding in knockout.
The visible binding causes the associated DOM element to become hidden or visible according to the value you pass to the binding.
And second think should be the optionsCaption comes under options binding.
If you use optionsCaption with options binding than ko will prepend an extra option in the select list, which will be selected by default and contains value undefined.
By using this both i have create a fiddle according to your requirement. Check this:
Demo fiddle
Hope this is what you are looking for!
I'm using the asmselect plugin to allow users to select & order multiple items from a select box.
I only want to enable the submit button when the user has made a change. The following works, but change does not get called when sorting the selected elements:
<script type="text/javascript">
$(document).ready(function() {
$("select[multiple]").asmSelect({
addItemTarget: 'bottom',
highlight: false,
hideWhenAdded: true,
sortable: true
});
// track changes with our own event
$("#mySelect").change(function(e, data) {
$("#submit").removeAttr("disabled");
// if it's a sort or an add, then give it a little color animation to highlight it
if (data.type != 'drop') data.item.animate({ 'backgroundColor': '#ffffcc' }, 20, linear', function() {
data.item.animate({ 'backgroundColor': '#dddddd' }, 500);
});
});
});
</script>
The select & submit:
<select id="mySelect" multiple="multiple" name="mySelect[]" title="Select Elements">
<% foreach (var item in Model)
{ %>
<option <%= item.Selected ? "selected=selected" : "" %> value="<%= Html.Encode(item.ID) %>">
<%= Html.Encode(item.Text) %></option>
<% } %>
</select>
<input type="submit" value="Save" id="submit" disabled="disabled" />
How can I enable the submit when selected elements are sorted?
You need to change asm function as below:
function makeSortable()
{
// make any items in the selected list sortable
// requires jQuery UI sortables, draggables, droppables
$ol.sortable({
items: 'li.' + options.listItemClass,
handle: '.' + options.listItemLabelClass,
axis: 'y',
update: function(e, data)
{
var updatedOptionId;
$(this).children("li").each(function(n)
{
//$option = $('#' + $(this).attr('rel'));
// i'm not sure what this is here for as the return will break ordering
//if($(this).is(".ui-sortable-helper"))
{
// updatedOptionId = $option.attr('id');
// return;
//
}
//$original.append($option);
$original.append($('#' + $(this).attr('rel')));
});
//we want to trigger change event always, even if it is only the order that has been changed.
//if(updatedOptionId) triggerOriginalChange(updatedOptionId, 'sort');
triggerOriginalChange(updatedOptionId, 'sort');
}
}).addClass(options.listSortableClass);
}
It seems that with older versions of jquery/jquery-ui, an additional event was triggered for an item with ui-sortable-helper attribute. It
Try my updated version of asmselect. See code and example here