I need to change the header as each month is selected. This includes text from a database so we are talking about ajax, which I am familiar with. I just need to know the event that is triggered on a month change and also capture the month/year that is being loaded.
The eventAfterAllRender callback option is your best bet. http://fullcalendar.io/docs/event_rendering/eventAfterAllRender/
Here's a little demo: http://jsfiddle.net/slicedtoad/jk9u53h6/1/
When all the events are finished rendering (which happens anytime the month, day or week is changed) it convert the current date into a string and replace the title text with it.
var dateChanged = function(){
var currentDate = $("#calendar").fullCalendar('getDate');
console.log(currentDate);
$('.fc-toolbar .fc-left h2').text(currentDate.format());
}
var $fc = $("#calendar").fullCalendar({
eventAfterAllRender: dateChanged,
});
Not super solid, but you should be able to make it fit your needs.
Related
When I click on a empty time slot on fullCalendar, it draws a rectangle on that empty cell. So, If my slotDuration is 30min, the block represents 30 min. I also can drag the cursor over multiple cells and select a custom range. But what I need to do is, when the user click (not drag) on a cell, select and draw the rectangle on 2 cells (representing 1 hour). Is this possible? I cannot change the slotDuration.
If I change the snapDuration to 1 hour, it works, but sadly, I cannot change it also.
What I was looking for is a way to override the event.end but that did not work.
Update 1:
I was able to do this exposing the cellDuration property:
on fullCalendar.js:
t.setCellDuration = function (minutes) {
var duration = moment.duration(minutes, 'minutes');
var view = t.getView();
view.timeGrid.cellDuration = duration;
}
now on the renderEvent handler, I can call
element.fullCalendar("setCellDuration", 60);
It works but if there is an alternative that does not involve change fullCalendar code, it would be nice.
I think you cannot do it just modifying the properties of the calendar, but you could do it modifying the fullCalendar.js file. Yes, I know you specify it on your question, but I think there is not alternative.
Exactly the listenStop function, which resides at line 4527 at version 2.3.3
listenStop check an array call dates
dates[
{FCMoment}, //start
{FCMoment} //end
]
So, before that check, you can modify your end time as you prefer. In addition, you have to render it.
In your code, now listenStop() function should be something like:
listenStop: function(ev) {
if (dates) { // started and ended on a cell?
if (dates[0].isSame(dates[1])) {
dates[1] = dates[0].clone().add(1, 'hours'); //Now we modify the end
_this.renderSelection(dates[0], dates[1]); //And render the modified selection
view.trigger('dayClick', dayEl[0], start, ev);
}
if (isSelectable) {
// the selection will already have been rendered. just report it
view.reportSelection(start, end, ev);
}
}
}
I've just moved to web development and need to know how i can implement below requirement using asp.net and vb.net.
I have three fields in a form which are filled by users. Based on these three values, i need to auto-populate the 4th field. I have planned to implement this in the following way
Write a separate class file with a function to calculate the possible values for the 4th fields based on 1st 3 inputs. This function can return some where between 1-10 values. So I've decided to use drop-down for 4th field, and allow users to select the appropriate value.
Call the above function in onchange function of 3rd field and take and use the return values to populate the 4th field. I'm planning to get the return values in array field.(Does this need a post back?)
Please let me know how if there is better way to implement this.
Thanks.
You may want to consider doing this with Javascript. You could read and control the fields pretty easily with pure Javascript, or using a nice library like jQuery (my favorite). If you did it this way, no post-back would be required and the 4th field would update immediately. (Nice for your users)
You can also do it with ASP.NET for the most part. "onchange" in ASP.NET still requires Javascript as far as I know, it just does some of it for you. A post-back will definitely happen when you change something.
You need javascript or to set autopostback=true on your form elements.
From a user perspective the best thing is to use javascript to populate the field for display, BUT when the form is submitted use your backend function to validate it. This will make sure the user didn't change the value.
An easy way is to use jQuery for the UI (that way you don't have to worry about long winded javascript and deal with browser compatibility as it's already taken care of for you) and have it call to the server for the data. For the server, your easiest route is to return JSON for looping values.
Include your jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Then add in a handle for the JavaScript:
<script type="text/javascript">
function autoPopulate() {
var value1 = $('#ddl1').val();
var value2 = $('#ddl2').val();
var value3 = $('#ddl3').val();
var url = 'path/to/your/file.aspx?value1=' + value1 + '&value2=' + value2 + '&value3=' + value3;
$.getJSON(url, function(data) {
data == null ? return false : data = eval(data);
var ddl = $('#ddl4')[0];
for (i = 0; i < data.length; i++) {
var option = new Option(data[i][0], data[i][1]);
if ($.browser.msie) {
ddl.add(option);
} else {
ddl.add(option, null);
}
}
}
}
</script>
(Yes, I know I used a native loop but I'm little lazy here today :) )
Now, for your server side code you'll want your code your page to return data in the format of:
[['value1','text1'],['value2','text2'],['value3','value3']]
so something like:
<script type="vb" runat="server">
Private Sub Page_Init()
// get your data
// loop through it and add in values
// ex.
Dim result As String = "[" //start multi-dimensional array
For Each Item As String In data
result += String.Format("['{0}','{1}'],", _value, _text)
Next
result = result.SubString(0, result.Length - 1) // removes trailing comma
result += "]" // closes off m-array
Response.Write(result)
Response.Flush()
End Sub
</script>
I know its possible to receive a dayClick event on Fullcalendar. But I would like to manage just the double click event. Is this possible?
There is a manageable way to handle double clicks in the FullCalendar dayClick event.
The "300" is really just an arbitrary amount of time in milliseconds to determine whether or not the clicks are close enough to call them a double click. If you want them faster or slower you can shrink or increase the number accordingly.
var this_click_time = new Date().getTime();
var time_since_last_click = this_click_time - last_click_time;
last_click_time = this_click_time;
if(time_since_last_click < 300)
{
// Double Click = true;
}
currently not possible, will be possible when dayRender is developed. Alternately, you could look at this person's patch but can't say how far you'd get with it.
I am using the Ajax Control Toolkit Calendar Extender control. In some fields though I want to display the time along with the date. I have tried just setting the Format to "dd/MM/yyyy hh:mm:ss" but the time section gets wiped off. If the user wants to change the time section they can do it manually, the calendar drop down is only used for changing the date part.
Are there any workarounds or alternatives to get this working?
I have a similar issue and I'm planning to use a Date field and an associated time dropdown (in 1/2 hour increments). User sets the date in the date field, optionally using the calendar control, and pulls down to a valid time. I plan to have one selection in the time drop down be a "don't care" in case it an "all day" event.
[EDIT] I found this jquery plugin that I may end up using. I also found a link to Gaia DateTimePicker in the answers to this post (which now looks to be deleted, probably because the OP was asking for WPF controls, not web controls).
The Ra-Ajax Calendar is coming out with TIME support this upcoming Friday (28th of Nov. 2008) and it's LGPL licensed...
Based on CalendarExtender, you can set the format as "MM/dd/yyyy". After the user select the date in calendar, it will return 04/28/2009 for example. In the date selected event, you can append the current time after the date returned.
OnClientDateSelectionChanged="dateselect"
function dateselect(ev)
{
var calendarBehavior1 = $find("Calendar1");
var d = calendarBehavior1._selectedDate;
var now = new Date();
calendarBehavior1.get_element().value = d.format("MM/dd/yyyy") + " "+now.format("HH:mm:ss")
}
The only way to add time component to the AjaxControlToolKit CalendarExtender, is to append it using OnClientDateSelectionChanged and JavaScript.
<ajaxToolkit:CalendarExtender ID="ce1" runat="server" PopupButtonID="calImg" Enabled="true" Format="dd/MM/yyyy" TargetControlID="txtLeft" PopupPosition="TopRight" OnClientDateSelectionChanged="AppendTime"></ajaxToolkit:CalendarExtender>
and
<script language="javascript" type="text/javascript">
//this script will get the date selected from the given calendarextender (ie: "sender") and append the
//current time to it.
function AppendTime(sender, args) {
var selectedDate = new Date();
selectedDate = sender.get_selectedDate();
var now = new Date();
sender.get_element().value = selectedDate.format("dd/MM/yyyy") + " " + now.format("hh:mm tt");
}
</script>
I want to add an item to an ASP.Net combobox using Javascript. I can retrieve the ID (No Masterpage). How can I add values to the combobox from Javascript? My present code looks like this.
//Fill the years (counting 100 from the first)
function fillvarYear() {
var dt = $('#txtBDate').val();
dt = dt.toString().substring(6);
var ye = parseInt(dt);
//Loop and add the next 100 years from the birth year to the combo
for (var j = 1; j <= 100; j++) {
ye += 1; //Add one year to the year count
var opt = document.createElement("OPTION");
opt.text = ye;
opt.value = ye;
document.form1.ddlYear.add(opt);
}
}
To see the value on postback:
string selectedValue = Request.Params[combobox.UniqueId]
Remember, changing the values in a combobox with javascript will cause an Event Validation exception to be thrown, and is generally a bad idea, as you'll have to explicitly disabled event validation.
I'd recommend placing the combobox in an update panel, so you can read txtBirthDate on the server and generate the appropriate data. You then won't have to manually preserve state either.
Always remember, ASP.NET controls are nothing "fancy" - they always end up at some point becoming standard HTML elements.
Try checking out this site. It has a pretty nice demo and overview. Take note however that you are altering the data at the client side - this means you will need to do it on each and every request because the ViewState will not be updated.
TBH, you are probably better off just using a HTML control rather than ASP ComboBox..
Can I ask why you are changing items via Javascript? (out of curiosity) :)
I found a possible solution. I don't know why the earlier code didn't work for me, but the line below
document.form1.ddlYear.appendChild(new Option(ye, ye));