How to change event and resources of fullcalendar

Question

1.00/5 (1 vote)

See more:

I am able to change [fullcalendar] resources but unable to change events(header of calendar).

What I have tried:

C#

var data = {
            startDate: $("#EventDate").val(),
            regionID: parseInt($("#SubRegion").val()),
            subTypeID: parseInt($("#Subtype").val()),
        };
        var events = {
            url: "@Url.Action("RefreshCalendar", "Ecom")",
            type: 'POST',
            data: data
        }
 $('#calendar').fullCalendar('removeEvents');
 $('#calendar').fullCalendar('addEventSource', event);

Posted 23-Sep-16 3:03am

itsathere

Updated 23-Sep-16 4:07am

v2

Add a Solution

Comments

David_Wimbley 23-Sep-16 9:09am

What do you mean by "change events (header of calendar)"

itsathere 23-Sep-16 9:22am

If you see the demo fullcalendar header of calendar show Sun/Mon/Tue/Wed/Thu/Fri/Sat.In my case all these days are places which is dynamic and I need to change it dynamically.

David_Wimbley 23-Sep-16 9:28am

Why would you want to change the header of those days? Is monday no longer monday?

Anyways, it looks like the headers have classes. Can't you just do

$(".fc-wed").html("Tuesday"); and now you've made the Wed header become Tues.

itsathere 23-Sep-16 9:52am

City1 city2 city3 city4 city5 ... these are dynamic header in place of Sun/Mon/Tue/Wed/Thu/Fri/Sat

and I need to change it dynamically onchange in dropdownlist.
below is url of snap shot
http://imgur.com/FnHkZ7x

David_Wimbley 23-Sep-16 9:58am

Again, City1 can correspond to Monday, so why not just do what I said

$(".fc-wed").html("City2");

itsathere 23-Sep-16 10:14am

But I have lots of column to bind in header but there is only 7 days in a week then how will I handle lots of data in your scenario.

David_Wimbley 23-Sep-16 10:25am

That is for you to figure out. In that month view calendar you only have seven days. So you have 7 headers to work with. Somehow your cities would correspond to a day (again, your logic).

You can also simply loop over all headers

$(".fc-day-header").each(function (k, v) {
var that = this;
var cities = //do something here to load cities to make your headers;

$.each(cities, function(k, v) {
// set the header text to be the city name
$(that).html(v);
});
});

Then somehow if you have 100 cities and only 7 headers, the each month needs to correspond to a group of 7 cities. So think of it as paging.

In C# you can do something like

// increment this value as you go through the months.
// for example, if you are in june (month 6) and you have 7 days in a week, 7 * 6 == 42
var citiesAlreadyShownCount = month * 7;

var returnCities= cities.Skip(citiesAlreadyShownCount).Take(7);

Then you take returnCities and show that in your .ajax call to update the headers of the day to be city names.

For stuff like this it is best if you take your problem and break it down into smaller pieces. You are getting held up at the "omg how do i make a calendar say city names instead of days" when if you break it down piece by piece (as i have above) eventually...with a bit of work...you'll achieve the functionality you are looking for.

itsathere 23-Sep-16 10:30am

Thanks for suggestion.I am trying to figure it out.

Karthik_Mahalingam 23-Sep-16 9:12am

which event? be more specific

itsathere 23-Sep-16 9:18am

On dropdownlist change I need to refresh data of calendar where header and event of calendar is dynamic.I am able to change event title but unable to change it's header value

Karthik_Mahalingam 23-Sep-16 9:21am

dropdownlist is a seperate control or part of the calendar control ?
header value ? on the provided link which is header value?

itsathere 23-Sep-16 9:22am

If you see the demo fullcalendar header of calendar show Sun/Mon/Tue/Wed/Thu/Fri/Sat.In my case all these days are places which is dynamic and I need to change it dynamically.

Karthik_Mahalingam 23-Sep-16 9:25am

ok fine, now what is your issue?
can you post a screenshot of it.

itsathere 23-Sep-16 9:41am

I don't know to how to post screen shot but I am an example below

City1 city2 city3 city4 city5 ... these are dynamic header in place of Sun/Mon/Tue/Wed/Thu/Fri/Sat

and I need to change it dynamically onchange in dropdownlist.

Karthik_Mahalingam 23-Sep-16 9:43am

use this[^]to upload screenshot and share the link

Karthik_Mahalingam 23-Sep-16 9:43am

dropdownlist is a seperate control ?

itsathere 23-Sep-16 9:44am

Yes. below is url of snap shot
http://imgur.com/FnHkZ7x

Karthik_Mahalingam 23-Sep-16 10:09am

check this https://snag.gy/rlTyjo.jpg

itsathere 23-Sep-16 10:17am

Yes, header should be like your mentioned image url.

Karthik_Mahalingam 23-Sep-16 10:18am

check my solution

Richard Deeming 23-Sep-16 10:56am

It sounds like you need the FullCalendar Scheduler add-on, but that's a commercial component.

The only free scheduler component I've seen is @Dan-Letecky's DayPilot Scheduler Lite[^] control, which is quite limited when compared to the commercial version.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2016-09-23T04:07:00

Solution 1

try this

JavaScript

eventAfterAllRender: function () {
			    var map ={Sun:'City1',Mon:'City2',Tue:'City3',Wed:'City4',Thu:'City5',Fri:'City6',Sat:'City7'};
			    $('.fc-widget-header th').each(function (i,elem) {
			        var newText = map[$(elem).text()];                   
			        $(elem).text(newText);
			    });
			}

Posted 23-Sep-16 4:07am

Karthik_Mahalingam

Comments

itsathere 23-Sep-16 10:21am

I have dynamic lots of data to bind in header not only 7.When 1st time I load calendar then fullcalendar binds data correctly because I am providing json databut on search it should be change dynamically.So, header will be dynamic.

Karthik_Mahalingam 23-Sep-16 10:27am

a week view has only 7 columns

itsathere 23-Sep-16 10:37am

But I need it dyanamic try to understand the situation.Btw thanks for your valuable time.