MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
You set a break point at the place where data hasn't been defined and the date is in a function which is hard to check, please set a break point at 1425 line to see the data.
And you could see my code is start not date , it matters because full calendar doesn't recognize date ,.
data = data.d.map(function (e) {
return {title:e["training_title"],start:e.date}
})
Below is my break point.
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
You set a break point at the place where data hasn't been defined and the date is in a function which is hard to check, please set a break point at 1425 line to see the data.
If I put debugger on top then break point doesn't come inside map function, instead it goes to the close tag of script means </script>.
Then I place debugger here and see the result below.
Thanks
It is our choices, that show what we truly are, far more than our abilities.
data = data.d.map(function (e) {
return {title:e["training_title"],start:e.date}
})
As you could see , e is the parameter of the function that you have passed to map method, so if you remove the function , it will show the error.
If you want to debug the map method , please don't directly return the result, please write as follows.
data = data.d.map(function (e) {
var obj = {title:e["training_title"],start:e.date}
return obj;
})
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
If you don't want to use map method, you could refer to the code below, manually loop through the array and set data.
$(function () {
$.ajax({
type: "POST",
url: "/Services/MyService.asmx/HelloWorld",
data: JSON.stringify({ user_id: 1006 }),
contentType: "application/json",
datatype: "json",
success: function (data) {
//define an array to store the final data
var target = [];
// loop through data.d array
for (var i = 0; i < data.d.length; i++) {
//get training_title and set to an object's title property ,get date and set the object's start property to date.
var item = { title: data.d[i]["training_title"], start: data.d[i]["date"] }
// add the item to the target array
target.push(item);
}
$('#calendar').fullCalendar({
editable: false,
events: target // use the target array as events' datasrouce
})
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
})
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
$('#calendar').fullCalendar({
editable: false,
events: target // use the target array as events' datasrouce
})
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
After this my calendar changes like this And event is on 26th march which is not coming in calendar. Sorry, but I am very new to jquery, that's why I am facing this.
It is our choices, that show what we truly are, far more than our abilities.
And it seems that you should set startDate and endDate, if you are using bootstarp calendar
I have found little resource about the plugin , could your share your link that withe bootstarp calendar?
$.ajax({
type: "POST",
url: "/Services/MyService.asmx/HelloWorld",
data: JSON.stringify({ user_id: 1006 }),
contentType: "application/json",
datatype: "json",
success: function (data) {
var target = [];
// loop through data.d array
for (var i = 0; i < data.d.length; i++) {
//get training_title and set to an object's title property ,get date and set the object's start property to date.
var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) }
// add the item to the target array
target.push(item);
}
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
dataSource: target // use the target array as events' datasrouce
})
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
You say you have not seen event on 26th using full calendar , could you debug your code and see that data.d is?As you could see , other date shows well.
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
undefined means you haven't get the value, how do you get the name?
I write
var target = [];
// loop through data.d array
for (var i = 0; i < data.d.length; i++) {
//get training_title and set to an object's title property ,get date and set the object's start property to date.
var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) }
// add the item to the target array
target.push(item);
}
I need to know what you data looks like.
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
It's strange , there is only one item , the array should not contain so many elements.
Could you show me all your js code?
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
success: function (data) {
alert(data.d.date); // gives you 2/24/2019 12:00:00 AM
//... },
Now you can simply bind this date to your calendar.
Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
I think you could debug your code to check your array of data after the ajax call returns.
I wonder it is not an empty array.
$.ajax({
type: "POST",
url: "/Services/MyService.asmx/HelloWorld",
data: JSON.stringify({ user_id: 1006 }),
contentType: "application/json",
datatype: "json",
success: function (data) {
// here debug to see your array
var target = [];
// loop through data.d array
for (var i = 0; i < data.d.length; i++) {
//get training_title and set to an object's title property ,get date and set the object's start property to date.
var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) }
// add the item to the target array
target.push(item);
}
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
dataSource: target // use the target array as events' datasrouce
})
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
I find your returned data is of type string not an array , you could refer to my picture.
You could see my data.d shows Array(1) , yours is string, so it loops through the string. I guess the string's length is 100.
You should return an object from your service.
Below is my service.
[WebMethod]
public List<TrainingDates> HelloWorld(int user_id)
{
var TDates = new List<TrainingDates>();
var dates = new TrainingDates
{
training_title = "Induction Workshop has been scheduled on 27th – 29th March 2019",
date = "2/24/2019 12:00:00 AM"
};
TDates.Add(dates);
return TDates;
} public class TrainingDates { public string training_title { get; set; } public string date { get; set; } }
You should return data of type List<TrainingDates>.
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Your console shows you are using fullcalendar instead of bootstrap-calendar.
If you want to use bootstrap-calendar please change fullCalendar to calendar and import your bootstrap-year-calendar.css and bootstrap-year-calendar.js
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
dataSource: target // use the target array as events' datasrouce
})
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
You should parse your datastring to data of type date.
Below is my code.
// define a function to parse string to date
function parseStringToDate(dateString) {
// get year , month and day
var ymd = dateString.split(" ")[0].split("/");
var mydate = new Date(parseInt(ymd[2]), parseInt(ymd[0])-1, parseInt(ymd[1]))
return mydate;
}
$(function () {
$.ajax({
type: "POST",
url: "/Services/MyService.asmx/HelloWorld",
async:false,
data: JSON.stringify({ user_id: 1006 }),
contentType: "application/json",
datatype: "json",
success: function (data) {
var target = [];
// loop through data.d array
for (var i = 0; i < data.d.length; i++) {
var item = { name: data.d[i]["training_title"], startDate:parseStringToDate(data.d[i]["date"]) , endDate:parseStringToDate(data.d[i]["date"]) }
// add the item to the target array
target.push(item);
}
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
dataSource: target // use the target array as events' datasrouce
})
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
})
Best regards,
Ackerly Xu
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Show date and event title in full calender div : Jquery
Feb 28, 2019 04:55 AM|demoninside9|LINK
Hi All,
I have already populated a full calender div on my page.
And I am getting data through a webservice likde below.
<script type="text/javascript"> $(document).ready(function () { BindControls(); }); function BindControls() { debugger; var uid = $("#ltuser").text(); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "ServiceGetTrainingDate.asmx/GetTrainingDates", data: "{'user_id':'" + uid + "'}", datatype: "json", success: function (data) { alert(data.d); var dataSource = $('#calendar').data('calendar').getDataSource(); }, error: function (XMLHttpRequest, textStatus, errorThrown) { debugger; } }); } </script>The format I recieved data in json format like below.
[{"training_title":"Induction Workshop has been scheduled on 27th – 29th March 2019","date":"2/24/2019 12:00:00 AM"}]Now I want to show this data in calender with title.
As I am new to jquery please suugest.
Thanks
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Feb 28, 2019 07:56 AM|Ackerly Xu|LINK
Hi demoninside9,
You could try the code below .
<head runat="server"> <title></title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="https://fullcalendar.io/assets/demo-topbar.css" rel="stylesheet" /> <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" /> <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet" media='print'/> <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js"></script> <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js"></script> <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js"></script> <script src="https://fullcalendar.io//assets/demo-to-codepen.js"></script> </head> <body> <form id="form1" runat="server"> <div id="calendar"> </div> </form> <script> $(function () { $.ajax({ type: "POST", url: "/Services/MyService.asmx/HelloWorld", // please write your own path data: JSON.stringify({ user_id: 1006 }), contentType: "application/json", datatype: "json", success: function (data) { // map the array element to object with property title and start // you could log the data to see the result data = data.d.map(function (e) { return {title:e["training_title"],start:e.date} }) $('#calendar').fullCalendar({ editable: false, events: data }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { } }); }) </script> </body>Here is use Array.prototype.map function to map the returned data, if you are not familiar with it , you could refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Feb 28, 2019 08:59 AM|demoninside9|LINK
I tried your code, I am getting the alert with data. I put the same key name which I am getting in my json data.
BUt it is not showing in calendar. I dig out it by putting a break point but it doesn't show data. Although I still get data in alert message box.
Please suggest.
Thanks
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 01:15 AM|Ackerly Xu|LINK
Hi demoninside9,
You set a break point at the place where data hasn't been defined and the date is in a function which is hard to check, please set a break point at 1425 line to see the data.
And you could see my code is start not date , it matters because full calendar doesn't recognize date ,.
data = data.d.map(function (e) { return {title:e["training_title"],start:e.date} })Below is my break point.
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 04:08 AM|demoninside9|LINK
If I put debugger on top then break point doesn't come inside map function, instead it goes to the close tag of script means </script>.
Then I place debugger here and see the result below.
Thanks
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 04:17 AM|Ackerly Xu|LINK
Hi demoninside9,
data = data.d.map(function (e) { return {title:e["training_title"],start:e.date} })As you could see , e is the parameter of the function that you have passed to map method, so if you remove the function , it will show the error.
If you want to debug the map method , please don't directly return the result, please write as follows.
data = data.d.map(function (e) { var obj = {title:e["training_title"],start:e.date} return obj; })Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 04:25 AM|demoninside9|LINK
Yes, data is coming in data but not mapping/showing in calendar.
Am I making some mistake in code to show the data in calendar?
<script type="text/javascript"> $(document).ready(function () { BindControls(); }); function BindControls() { var uid = $("#ltuser").text(); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "ServiceGetTrainingDate.asmx/GetTrainingDates", data: "{'user_id':'" + uid + "'}", datatype: "json", success: function (data) { alert(data.d); var obj = { title: e["training_title"], start: e.date } return obj; debugger; $('#calendar').fullCalendar({ editable: false, events: obj // here I put both "obj" and "data" nothing is working }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { debugger; } }); } //} </script>Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 04:35 AM|Ackerly Xu|LINK
Hi demoninside9,
If you don't want to use map method, you could refer to the code below, manually loop through the array and set data.
$(function () { $.ajax({ type: "POST", url: "/Services/MyService.asmx/HelloWorld", data: JSON.stringify({ user_id: 1006 }), contentType: "application/json", datatype: "json", success: function (data) { //define an array to store the final data var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { //get training_title and set to an object's title property ,get date and set the object's start property to date. var item = { title: data.d[i]["training_title"], start: data.d[i]["date"] } // add the item to the target array target.push(item); } $('#calendar').fullCalendar({ editable: false, events: target // use the target array as events' datasrouce }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { } }); })Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 05:05 AM|demoninside9|LINK
My data has only one item, but data.d.length shows 117. \
So it loops 117 times. any why.. after that it shows that there fullcalendar is not a function
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 05:10 AM|Ackerly Xu|LINK
Hi demoninside9,
Have you import fullcalendar.js in your head?
And how you call the fullCalendar function?
$('#calendar').fullCalendar({ editable: false, events: target // use the target array as events' datasrouce })Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 05:20 AM|demoninside9|LINK
I am populating full calendar by using bootstrap-year-calendar.
<link href="https://fullcalendar.io/assets/demo-topbar.css" rel="stylesheet" /> <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" /> <link href="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet" media='print'/> <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/moment.min.js"></script> <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/lib/jquery.min.js"></script> <script src="https://fullcalendar.io/releases/fullcalendar/3.9.0/fullcalendar.min.js"></script> <script src="https://fullcalendar.io//assets/demo-to-codepen.js"></script>Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 06:08 AM|Ackerly Xu|LINK
Hi demoninside9,
I'm sorry , I don't know you are using bootstarp calendar instead of fullcalendar.
I have found one in below link.
https://codepen.io/anon/pen/jJWywP?editors=1111
And it seems that you should set startDate and endDate, if you are using bootstarp calendar
I have found little resource about the plugin , could your share your link that withe bootstarp calendar?
$.ajax({ type: "POST", url: "/Services/MyService.asmx/HelloWorld", data: JSON.stringify({ user_id: 1006 }), contentType: "application/json", datatype: "json", success: function (data) { var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { //get training_title and set to an object's title property ,get date and set the object's start property to date. var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) } // add the item to the target array target.push(item); } $('#calendar').calendar({ enableContextMenu: true, enableRangeSelection: true, dataSource: target // use the target array as events' datasrouce }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { } });You say you have not seen event on 26th using full calendar , could you debug your code and see that data.d is?As you could see , other date shows well.
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 08:39 AM|demoninside9|LINK
You not need to say sorry. I forgot to mention in the post.
Show
Here is the link from where I get the bootstrap full year calendar.
http://www.bootstrap-year-calendar.com/#Examples/Full%20example
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 09:19 AM|Ackerly Xu|LINK
Hi demoninside9,
undefined means you haven't get the value, how do you get the name?
I write
var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { //get training_title and set to an object's title property ,get date and set the object's start property to date. var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) } // add the item to the target array target.push(item); }I need to know what you data looks like.
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 09:40 AM|demoninside9|LINK
public class TrainingDates { public string training_title { get; set; } public string date { get; set; } }Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 10:00 AM|Ackerly Xu|LINK
Hi demoninside9,
It's strange , there is only one item , the array should not contain so many elements.
Could you show me all your js code?
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 11:25 AM|demoninside9|LINK
Boss, it is too lengthy, but still I am sharing. My block is the last one in down side.
<script type="text/javascript" class="publish"> function editEvent(event) { $('#event-modal input[name="event-index"]').val(event ? event.id : ''); $('#event-modal input[name="event-name"]').val(event ? event.name : ''); $('#event-modal input[name="event-location"]').val(event ? event.location : ''); $('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : ''); $('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : ''); $('#event-modal').modal(); } function deleteEvent(event) { var dataSource = $('#calendar').data('calendar').getDataSource(); for (var i in dataSource) { if (dataSource[i].id == event.id) { dataSource.splice(i, 1); break; } } $('#calendar').data('calendar').setDataSource(dataSource); } function saveEvent() { var event = { id: $('#event-modal input[name="event-index"]').val(), name: $('#event-modal input[name="event-name"]').val(), location: $('#event-modal input[name="event-location"]').val(), startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'), endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate') } var dataSource = $('#calendar').data('calendar').getDataSource(); if (event.id) { for (var i in dataSource) { if (dataSource[i].id == event.id) { dataSource[i].name = event.name; dataSource[i].location = event.location; dataSource[i].startDate = event.startDate; dataSource[i].endDate = event.endDate; } } } else { var newId = 0; for (var i in dataSource) { if (dataSource[i].id > newId) { newId = dataSource[i].id; } } newId++; event.id = newId; dataSource.push(event); } $('#calendar').data('calendar').setDataSource(dataSource); $('#event-modal').modal('hide'); } function getMyData() { var myData = []; $.ajax({ type: "Post", url: 'validate.ashx', data: { "Holiday_List": document.getElementById("hdcountryID").value, "EMPID": document.getElementById("hdempid").value, "EMPTYPE": document.getElementById("hd_logintype").value }, context: document.body, async: false, success: function (data) { var dt = JSON.parse(data); if (dt == '') { } else { var _color = ""; $(dt).each(function (i) { if (dt[i]._type == "holiday") { _color = '#B2BFB1'; } else if (dt[i]._type == "annual leave") { _color = '#52A8FF'; } else if (dt[i]._type == "sick leave") { _color = '#F5A400'; } else { _color = '#82ae5f'; } myData.push({ id: dt[i].bigid, name: dt[i].Reason, location: '', startDate: new Date(dt[i].startyear, dt[i].startmonth, dt[i].startdate), endDate: new Date(dt[i].endyear, dt[i].endmonth, dt[i].enddate), color: _color }); }); } } }); return myData; } // meena function getdisableddate() { var myData1 = []; if (document.getElementById("hd_logintype").value != "Y") { if (document.getElementById("hd_logintype").value != "S") { var type = document.getElementById("hd_logintype").value; var _backyear = document.getElementById("hd_backyear").value; var newday = new Date(); var currentYear = new Date().getFullYear(); var curdate = new Date(currentYear, newday.getMonth(), newday.getDate() - parseInt(document.getElementById("hd_backdays").value)); var enddate1 = new Date(currentYear + 2, 0, 1); var Currentmonth = curdate.getMonth(); curdate.setDate(curdate.getDate() - 1); if (type == "Y") { if (type == "S") { for (var d = new Date(currentYear - 1, 0, 1) ; d < enddate1; d.setDate(d.getDate() + 1)) { myData1.push(new Date(d)); } } } else { for (var d = new Date(currentYear - 1, 0, 1) ; d < curdate; d.setDate(d.getDate() + 1)) { myData1.push(new Date(d)); } } } } return myData1; } $(function () { var currentYear = new Date().getFullYear(); var curdate = new Date(); var Currentmonth = curdate.getMonth(); var currentDate = curdate.getDate(); var _maxDate = new Date(currentYear + 1, 11, 31); var _minDate = new Date(currentYear - 1, 0, 1); var circleDateTime = new Date(currentYear, Currentmonth, currentDate).getTime(); $('#calendar').calendar({ language: '' + document.getElementById("hdlangname").value + '', dataSource: getMyData(), maxDate: _maxDate, minDate: _minDate, enableContextMenu: false, enableRangeSelection: true, displayWeekNumber: true, contextMenuItems: [ { text: 'Update', click: editEvent }, { text: 'Delete', click: deleteEvent } ], mouseOnDay: function (e) { if (e.events.length > 0) { var content = ''; for (var i in e.events) { content += '<div class="event-tooltip-content">' + '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>' // + '<div class="event-location">' + e.events[i].location + '</div>' + '</div>'; } $(e.element).popover({ trigger: 'manual', container: 'body', html: true, content: content }); $(e.element).popover('show'); } }, mouseOutDay: function (e) { if (e.events.length > 0) { $(e.element).popover('hide'); } }, dayContextMenu: function (e) { $(e.element).popover('hide'); }, customDayRenderer: function (element, date) { if (date.getTime() == circleDateTime) { $(element).css('border', '1px solid #a5a5a5'); // $(element).css('color', 'white'); $(element).css('border-radius', '15px'); } }, selectRange: function (e) { if (document.getElementById("hd_logintype").value != "Y") { var _start = new Date(e.startDate); var _clickmonth = _start.getMonth() + 1; var _clickDate = _start.getDate(); var _clickyear = new Date(e.startDate).getFullYear(); var _today = new Date(); _today.setDate(_today.getDate() - 11); if (_today > e.startDate) { alert("You are only authorize to take 10 days back leave."); return false; } var _end = new Date(e.endDate); var _clickmonth3 = _end.getMonth() + 1; var _clickDate1 = _end.getDate(); var _clickyear1 = new Date(e.endDate).getFullYear(); var months = new Array(12); months[0] = "Jan"; months[1] = "Feb"; months[2] = "Mar"; months[3] = "Apr"; months[4] = "May"; months[5] = "Jun"; months[6] = "Jul"; months[7] = "Aug"; months[8] = "Sep"; months[9] = "Oct"; months[10] = "Nov"; months[11] = "Dec"; var _clickmonth1 = _start.getMonth(); _clickmonth1 = months[_clickmonth1]; var _clickmonth2 = _end.getMonth(); _clickmonth2 = months[_clickmonth2]; var _url = 'validate.ashx'; $.ajax({ type: "POST", url: _url, data: { "_CountryID": document.getElementById("hdcountryID").value, "_EventDate": _clickmonth + '/' + _clickDate + '/' + _clickyear }, context: document.body, success: function (data) { var dt = JSON.parse(data); if (dt == '') { editEvent({ startDate: e.startDate, endDate: e.endDate }); if (_clickmonth < 10) { if (_clickDate < 10) { document.getElementById("txtleavestart").value = '0' + _clickDate + '-' + _clickmonth1 + '-' + _clickyear; } else { document.getElementById("txtleavestart").value = _clickDate + '-' + _clickmonth1 + '-' + _clickyear; } if (_clickDate1 < 10) { document.getElementById("txtleaveend").value = '0' + _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1; } else { document.getElementById("txtleaveend").value = _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1; } } else { if (_clickDate < 10) { document.getElementById("txtleavestart").value = '0' + _clickDate + '-' + _clickmonth1 + '-' + _clickyear; } else { document.getElementById("txtleavestart").value = _clickDate + '-' + _clickmonth1 + '-' + _clickyear; } if (_clickDate1 < 10) { document.getElementById("txtleaveend").value = '0' + _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1; } else { document.getElementById("txtleaveend").value = _clickDate1 + '-' + _clickmonth2 + '-' + _clickyear1; } } } else { $(dt).each(function (i) { if (dt[i].holidayname == "1") { alert("Weekly Off"); return false; } else { alert("Holiday for " + dt[i].holidayname); return false; } }); } } }); } else { alert("You are not authorize to apply for leave."); return false; } }, disabledDays: getdisableddate() }); $('#save-event').click(function () { saveEvent(); }); }); </script> <script> function _checkemailid(_id) { if (document.getElementById(_id).value != "") { var _url = 'validate.ashx'; $.ajax({ type: "POST", url: _url, data: { "_leaveemailcheck": document.getElementById(_id).value }, context: document.body, async: false, success: function (data) { if (data == "N") { document.getElementById(_id).value = ""; document.getElementById("lblmsg").innerHTML = "Please enter correct email id."; } } }); } } </script> </div> </div> <%--<%} %>--%> <!-- End calendar box --> <div class="clearfix"> </div> <!-- start footer --> <uc1:Footer ID="Footer1" runat="server" /> </div> </div> </div> </div> <!-- Go top --> <a href="#" class="scrollup"><i class="fa fa-chevron-up"></i></a> <!-- Go top --> <script src="assets/js/vendor/chartJs/Chart.bundle.js"></script> <!--timeline_horizontal--> <script src="assets/js/vendor/jquery.mobile.custom.min.js"></script> <script src="assets/js/vendor/hTimeline.js"></script> <!-- amcharts --> <script src="assets/js/vendor/amcharts/amcharts.js"></script> <script src="assets/js/vendor/amcharts/serial.js"></script> <script src="assets/js/vendor/amcharts/pie.js"></script> <script src="assets/js/vendor/amcharts/gantt.js"></script> <script src="assets/js/vendor/amcharts/funnel.js"></script> <script src="assets/js/vendor/amcharts/radar.js"></script> <script src="assets/js/vendor/amcharts/amstock.js"></script> <script src="assets/js/vendor/amcharts/ammap.js"></script> <script src="assets/js/vendor/amcharts/worldLow.js"></script> <script src="assets/js/vendor/amcharts/light.js"></script> <!-- Peity --> <script src="assets/js/vendor/peityJs/jquery.peity.min.js"></script> <script src="assets/js/vendor/icheck.js"></script> <!-- dataTables--> <script type="text/javascript" src="assets/js/vendor/jquery.dataTables.js"></script> <script type="text/javascript" src="assets/js/vendor/dataTables.bootstrap.min.js"></script> <!-- js for print and download --> <script type="text/javascript" src="assets/js/vendor/dataTables.buttons.min.js"></script> <script type="text/javascript" src="assets/js/vendor/buttons.flash.min.js"></script> <script type="text/javascript" src="assets/js/vendor/jszip.min.js"></script> <script type="text/javascript" src="assets/js/vendor/pdfmake.min.js"></script> <script type="text/javascript" src="assets/js/vendor/vfs_fonts.js"></script> <script type="text/javascript" src="assets/js/vendor/buttons.html5.min.js"></script> <script type="text/javascript" src="assets/js/vendor/buttons.print.min.js"></script> <script type="text/javascript" src="assets/js/vendor/dataTables.responsive.min.js"></script> <script type="text/javascript" src="assets/js/vendor/dataTables.fixedHeader.min.js"></script> <!-- slimscroll js --> <script type="text/javascript" src="assets/js/vendor/jquery.slimscroll.js"></script> <!-- dashboard1 js --> <script src="assets/js/dashboard1.js"></script> <!-- main js --> <script src="assets/js/main.js"></script> <!-- adminbag demo js--> <script src="assets/js/adminbagdemo.js"></script> <asp:Literal ID="ltcal" runat="server"></asp:Literal> <script language="javascript" type="text/javascript" src="../codelibrary/js/scw4.js"></script> <script type="text/javascript"> function _ddiff123() { var date1 = new Date("" + document.getElementById("txtleavestart").value + ""); var date2 = new Date("" + document.getElementById("txtleaveend").value + ""); var timeDiff = Math.abs(date2.getTime() - date1.getTime()); var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); diffDays = diffDays + 1; document.getElementById("lbldays").innerHTML = diffDays; } </script> <link rel="stylesheet" href="assets/css/jquery-ui.css"> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <asp:Literal ID="ltsuper" runat="server"></asp:Literal> <asp:Literal ID="ltdeputy" runat="server"></asp:Literal> <asp:Literal ID="ltprov1" runat="server"></asp:Literal> <asp:Literal ID="ltprov2" runat="server"></asp:Literal> <script type="text/javascript"> function _sickcheck() { var _type = $('#cmb_type').find('option:selected').text(); document.getElementById("hdtypename").value = _type; _type = _type.toLowerCase(); if (_type == "sick leave") { document.getElementById("tdb1").style.visibility = 'visible'; //document.getElementById("tdb2").style.visibility = 'visible'; document.getElementById("hdcheck").value = 'V'; } else { document.getElementById("tdb1").style.visibility = 'hidden'; //document.getElementById("tdb2").style.visibility = 'hidden'; document.getElementById("hdcheck").value = ''; } } function _halfday() { // alert("ddd"); if ((document.getElementById("txtleavestart").value != "") && (document.getElementById("txtleaveend").value != "")) { if (document.getElementById("txtleavestart").value == document.getElementById("txtleaveend").value) { document.getElementById("hd1").style.visibility = 'visible'; //document.getElementById("hd2").style.visibility = 'visible'; document.getElementById("hdhalf").value = 'Y'; } else { document.getElementById("hd1").style.visibility = 'hidden'; //document.getElementById("hd2").style.visibility = 'hidden'; document.getElementById("hdhalf").value = ''; } } else { document.getElementById("hd1").style.visibility = 'hidden'; //document.getElementById("hd2").style.visibility = 'hidden'; document.getElementById("hdhalf").value = ''; } } //onmouseover="javascript:_halfday();" </script> </form> <script language="javascript" type="text/javascript" src="../codelibrary/js/lib.js"></script> <script language="JavaScript" type="text/javascript"> function ChkallValidation() { if (validateForm(document.getElementById("form1"))) { if (document.getElementById("chkdeputy").checked == true) { $("#cmdSubmit").hide(); return true; } } else { return false; } } </script> <script type="text/javascript"> $(document).ready(function () { BindControls(); }); function BindControls() { var uid = $("#ltuser").text(); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "ServiceGetTrainingDate.asmx/GetTrainingDates", data: "{'user_id':'" + uid + "'}", datatype: "json", success: function (data) { //define an array to store the final data debugger; var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { //get training_title and set to an object's title property ,get date and set the object's start property to date. var item = { name: data.d[i]["training_title"], startDate: Date.now(), endDate: new Date(2019, 4, 29) } // add the item to the target array target.push(item); } $('#calendar').fullCalendar({ enableContextMenu: true, enableRangeSelection: true, dataSource: target // use the target array as events' datasrouce }) }, error: function (XMLHttpRequest, textStatus, errorThrown) { debugger; } }); } //}</script>
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 11:54 AM|demoninside9|LINK
I guess the array takes other data which is resides on my page itself .
Actually I can not make a new page for my purpose. Otherwise it would have not hard to nail.
There are already many functionality running. I did not created this page. But I need add my services data in the same calendar.
Thanks
Participant
1253 Points
936 Posts
Re: Show date and event title in full calender div : Jquery
Mar 01, 2019 12:19 PM|yogyogi|LINK
In your success callback you can do this:
success: function (data) { alert(data.d.date); // gives you 2/24/2019 12:00:00 AM //...},
Now you can simply bind this date to your calendar.
♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 04, 2019 01:38 AM|Ackerly Xu|LINK
Hi demoninside9,
I see you function that retrieve data is
function getMyData() { var myData = []; $.ajax({ type: "Post", url: 'validate.ashx', data: { "Holiday_List": document.getElementById("hdcountryID").value, "EMPID": document.getElementById("hdempid").value, "EMPTYPE": document.getElementById("hd_logintype").value }, context: document.body, async: false, success: function (data) { var dt = JSON.parse(data); if (dt == '') { } else { var _color = ""; $(dt).each(function (i) { if (dt[i]._type == "holiday") { _color = '#B2BFB1'; } else if (dt[i]._type == "annual leave") { _color = '#52A8FF'; } else if (dt[i]._type == "sick leave") { _color = '#F5A400'; } else { _color = '#82ae5f'; } myData.push({ id: dt[i].bigid, name: dt[i].Reason, location: '', startDate: new Date(dt[i].startyear, dt[i].startmonth, dt[i].startdate), endDate: new Date(dt[i].endyear, dt[i].endmonth, dt[i].enddate), color: _color }); }); } } }); return myData; }It is different from your original code.
I think you could debug your code to check your array of data after the ajax call returns.
I wonder it is not an empty array.
$.ajax({ type: "POST", url: "/Services/MyService.asmx/HelloWorld", data: JSON.stringify({ user_id: 1006 }), contentType: "application/json", datatype: "json", success: function (data) { // here debug to see your array var target = []; // loop through data.d array for (var i = 0; i < data.d.length; i++) { //get training_title and set to an object's title property ,get date and set the object's start property to date. var item = { name: data.d[i]["training_title"], startDate: Date.now(),endDate: new Date(2019, 4, 29) } // add the item to the target array target.push(item); } $('#calendar').calendar({ enableContextMenu: true, enableRangeSelection: true, dataSource: target // use the target array as events' datasrouce })Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 04, 2019 08:07 AM|demoninside9|LINK
This is separate one.
I have written another scrip block to call my webservice.
Is getMyData() interrupting my new ajax fucntion?
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 04, 2019 08:54 AM|Ackerly Xu|LINK
Hi demoninside9,
I find your returned data is of type string not an array , you could refer to my picture.
You could see my data.d shows Array(1) , yours is string, so it loops through the string. I guess the string's length is 100.
You should return an object from your service.
Below is my service.
[WebMethod] public List<TrainingDates> HelloWorld(int user_id) { var TDates = new List<TrainingDates>(); var dates = new TrainingDates { training_title = "Induction Workshop has been scheduled on 27th – 29th March 2019", date = "2/24/2019 12:00:00 AM" }; TDates.Add(dates); return TDates; }public class TrainingDates
{
public string training_title { get; set; }
public string date { get; set; }
}
You should return data of type List<TrainingDates>.
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 04, 2019 10:53 AM|demoninside9|LINK
Yes, I did the same as you suggested.
Now I am getting only one item in array. But not showing in calendar.
And when I try go ahead by pressing F10 it shows a red point on the below line and goes into jquery file code.
here is shows the red point and immoderately goes into jquery
$('#calendar').fullCalendar({
And in console it shows the following error
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 05, 2019 01:18 AM|Ackerly Xu|LINK
Hi demoninside9,
Your console shows you are using fullcalendar instead of bootstrap-calendar.
If you want to use bootstrap-calendar please change fullCalendar to calendar and import your bootstrap-year-calendar.css and bootstrap-year-calendar.js
$('#calendar').calendar({ enableContextMenu: true, enableRangeSelection: true, dataSource: target // use the target array as events' datasrouce })Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 05, 2019 03:40 AM|demoninside9|LINK
Yes, It works.
I am almost done. My requirement is that my start date and end date should be equal.
form this line
var item = { name: data.d[i]["training_title"], startDate: Date.now(), endDate: new Date(2019, 4, 29) }Give the below output.
When I try to modify it to make both dates same like below.
var item = { name: data.d[i]["training_title"], startDate: data.d[i]["date"], endDate: data.d[i]["date"] }It doesn't show.
Thanks
Contributor
3500 Points
1300 Posts
Re: Show date and event title in full calender div : Jquery
Mar 05, 2019 05:53 AM|Ackerly Xu|LINK
Hi demoninside9,
You should parse your datastring to data of type date.
Below is my code.
Best regards,
Ackerly Xu
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1445 Points
2835 Posts
Re: Show date and event title in full calender div : Jquery
Mar 05, 2019 06:07 AM|demoninside9|LINK
Thank you... Thank you so much Ackerly Xu. You just made my day.
This is what I wanted.
Thanks again for giving your valuable time on this post.