Solved

Fullcalendar with days of month in 1 line

Posted on 2013-12-14
52
2,216 Views
Last Modified: 2014-07-01
Hi all,
On my project i need modify days of month in  1 line (like 1 2 3 4 ... 30/31 horizontal) and event below this.
Thank.
0
Comment
Question by:tytdimhen
  • 23
  • 16
  • 9
  • +3
52 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39718414
I don't fully understand your question.   Are you talking about the month, week or day view?http://arshaw.com/fullcalendar/
0
 

Author Comment

by:tytdimhen
ID: 39718421
no, i need all day of a mon in  1 line. like this
imgthank
0
 
LVL 39

Expert Comment

by:Roger Baklund
ID: 39718723
Do you need 31 input fields in a row? Try this:

<input name="d1" id="d1" type="text" size="2" />
<input name="d2" id="d2" type="text" size="2" />
<input name="d3" id="d3" type="text" size="2" />

Open in new window


...and so on.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39718827
Post a link to your page so we can see what code is needed to insert what you want.

Cd&
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39718968
I think modifying fullcalendar is not the way to go.  Roll your own like this.
http://jsbin.com/ObEpoYug/1/edit?html,css,output

Use your server side code to insert events.  Keep 31 squares but use your css to gray out days 31 or 30 depending on the month.

.row{width:2860px;}
.day{
  width:90px;
  height:70px;
  float:left;
  border-style:solid;
  border-width:1px;
}
.day span{
  display:block;
  margin-left:2px;
  margin-right:2px;

}

Open in new window

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>padas</title>
</head>
<body>
  <div class="row">
    <div class="day">1</div>
    <div class="day">2<span>Something here</span></div>
     <div class="day">3</div>
     <div class="day">4</div>
     <div class="day">5</div>
     <div class="day">6</div>
     <div class="day">7</div>
     <div class="day">8</div>
     <div class="day">9</div>
     <div class="day">10</div>
     <div class="day">11</div>
     <div class="day">12</div>
     <div class="day">13</div>
     <div class="day">14</div>
     <div class="day">15</div>
     <div class="day">16</div>
     <div class="day">17</div>
     <div class="day">18</div>
     <div class="day">19</div>
     <div class="day">20</div>
     <div class="day">21</div>
     <div class="day">22</div>
     <div class="day">23</div>
     <div class="day">24</div>
     <div class="day">25</div>
     <div class="day">26</div>
     <div class="day">27</div>
     <div class="day">28</div>
     <div class="day">29</div>
     <div class="day">30</div>
    <div class="day">31</div>
    
  </div>
</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39718974
Because of the very wide width needed, you are probably going to need to put it inside an iframe or  div that has overflow scroll.

Keep in mind the math, 50px wide + border = 52px wide * 31 squares = 1600px.  My sample used 80px; wide squares and needed over 2600px wide area.
0
 

Author Comment

by:tytdimhen
ID: 39719328
link
and this is fullcode
thank you.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39719458
The link does not work.  There should not be a need to download anything.  Please provide a working link to what you have or you can use http://jsbin.com/.

As I said, trying to get fullcalendar to do what you want is not a viable option.  Did you try my suggestion http:Q_28318169.html#a39718968
0
 

Author Comment

by:tytdimhen
ID: 39719462
pls allow antivirus except that's site, im using freehost,
or get full code here download
thank
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39719492
There should not be a reason for a zip file.  You can place your code in http://jsbin.com/ or post a public url.  When posting sample files, please keep it lean.  This only requires a small amount of static data as I have provided  http://jsbin.com/ObEpoYug/1/edit?html,css,output.  No serverside or ajax code needed.  http://css-tricks.com/reduced-test-cases/

Have you given any thought to my example?
0
 

Author Comment

by:tytdimhen
ID: 39719502
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39719529
I guess that means you want to still go with taking apart fullcalendar and putting it back together.  Just to get started I have updated the jsbin to make it easier to read.

http://jsbin.com/ObEpoYug/5/edit

Instead of the fullcalendar js inside of the js window, I have first expanded the code and placed it here http://jsbin.com/oxAMatUp/2/edit and accessed by  

<script src="http://jsbin.com/oxAMatUp/2/js"></script>

I also updated the jquery to 1.x latest.
0
 

Author Comment

by:tytdimhen
ID: 39720099
somebody help me
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39720233
I gave you an easy solution that you did not comment on.  I am busy until tuesday. I have asked anothet expert to help.  In order for us to help you, please communicate by answering our questions.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39720499
I am happy to help, but without a link to see the page you have, all I see is a design that on the surface of it looks like an idea from a fifth grader.  I cannot think of any business case where such a thing has any value.

However if you don't like what padas has already given you there is little hope unless you get very specific of what you don't like about it.

Cd&
0
 

Author Comment

by:tytdimhen
ID: 39720614
sure, i need, width of that is no important.
Link live site i has post
live
download
jsbin
thank you all,
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39720650
I've taken the jsbin by @padas and modified the fullcalendar.js file to get the calendar days to display in one horizontal row and placed the rendered page which uses the modified js file here:

http://jsbin.com/ObEpoYug/7/edit

The modified fullcalendar.js file is actually here on jsbin:

http://jsbin.com/azEwaSI/1/edit

THIS IS NOT A COMPLETE SOLUTION. The calendar displays in one horizontal row, but I have yet to figure out where in the fullcalendar.js file to modify the calculation for the absolute positioning of the events. Right now they just bunch up on the far left of the row. Also, the days of the week do not line up properly with the dates. As it is, every month starts with Sunday.

Does this get close to what you are looking for?
0
 

Author Comment

by:tytdimhen
ID: 39720656
may events show below like 1 in 1 line?
and width of every events is miss?
thank you,
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39720679
The events are not yet positioned properly. I cannot find the area in the code that sets the left and top absolute position. The code was exploded from a minified file. It's difficult to read and understand because only single characters were used to name functions and variables.
0
 

Author Comment

by:tytdimhen
ID: 39720704
can you modify it?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39721306
I spent hours yesterday getting it this far. Most of that time was spent just trying to comprehend the minified code. It was fun because it was challenging, like solving a puzzle, but today I have a real job. I can take a look again this evening.

Consider finding another calendar that's is less complex and modifying that. Or using @padas's simple suggestion. Asking the experts to modify this particular calendar is a lot to expect from a forum like EE in my opinion.
0
 

Author Comment

by:tytdimhen
ID: 39723012
ohm, i need simple calendar can display only.Month,week,day no need another control.
thank you
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39723138
>Month,week,day

All the same line.  If by month, then you see all 30 (or 29 or 31) days?  If week, then 7 days starting sunday?  If day, then just one square?  

Please be specific so we don't have to spend time on something that is not needed.  Thank you for letting us know you don't need the other controls. That is a big help.  

Sounds like back to the easy solution.  TommyBoy can you finish this one?
0
 

Author Comment

by:tytdimhen
ID: 39723348
yes,
i need on a month (0-...real days of month).
only view
thank you.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39723663
Can I finish this one? It would be a fun project to completely reverse engineer this calendar. Sadly, I cannot justify the time it would take to do that. I gave it another go last evening but got no closer to a complete solution.

I want to revisit this statement:
i need simple calendar can display only.Month,week,day no need another control.

The Fullcalendar has six controls:
- Month view
- Week view
- Day view
- Today button
- Previous button
- Next button

A simple javascript calendar would have three controls:
- Previous button
- Next button
- Today button

A simple display of the days of a given month wouldn't need any controls.

It's good to hear that you no longer need the Week button and the Day button.

What about the navigation buttons?

You didn't mention those in your statement. If you don't need those, then @padas's solution here is the answer. If you do need the navigation controls, then we will need some scripting. Or, we need to find a simple javascript calendar with navigation controls and modify that.
0
 

Author Comment

by:tytdimhen
ID: 39723753
yes, but data showing is not? i see event width not like u can change start,end on jsbin and see.
thank you.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 39723805
yes, but data showing is not?

Not understanding this.

What idea are you saying "yes" to? Navigation buttons?

"data showing is not?" Are you saying that the event data does not show on @padas's simple solution? You would use server side code to show events OR use javascript to read from an array OR read from a web service, json object, etc.

"data showing is not?" Are you saying that displaying events is not necessary?
0
 

Author Comment

by:tytdimhen
ID: 39724611
yes, you can change start from 1st and end is 30 and see, the width of events not large than 7?
only show is show with excelent. its not 1 2 3 ..31 status of day.(its not need edit,update or add event)
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39724831
This is my understanding based on your latest comment.

- The visible number of days does not need to be an entire month. It can be less than a full month. Events never span more than 7 days.

- The navigation buttons will cause a continuous scroll of the visible days.

- Events are display only. Edit, update and add is not required.

Do I have it right?
0
 

Author Comment

by:tytdimhen
ID: 39725545
this.
i need to show all days of month and events on that days(if got).
thank you.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39726495
This comment:
yes, you can change start from 1st and end is 30 and see, the width of events not large than 7?
only show is show with excelent. its not 1 2 3 ..31 status of day.(its not need edit,update or add event)
Seems to contradict this one:
i need to show all days of month and events on that days(if got).

I'm thoroughly confused. Does anyone have a full understanding of the requirements?

It was pointed out to you earlier by @padas here that, if you do the math, a row of 31 days can become very wide so the row should be in an iframe or a parent div with overflow hidden. I realize you need to display all days of each month, otherwise it would not be a calendar. The question is, how many days in a row actually need to show in the viewport? It could be any number that fits comfortably with your page design. How wide should each day be and how many days should show at one time? Do you have any kind of plan in mind for the finished page?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39726949
Is this sample http://jsbin.com/ObEpoYug/9/ ok?  I would not do anything more until we can get final version of what the static outcome looks like.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39728048
Another sample. Took a basic javascript calendar from here and modified it to display in one long row and include events. Added navigation too. Much easier than working with the Fullcalendar script. No jquery here, just javascript.

http://jsbin.com/oSegeLO/1/

Works great in Firefox. For some reason, in Chrome, some of the events are off by one day. If it's something you can use, I'll go back and fix that problem.
0
 

Author Comment

by:tytdimhen
ID: 39728255
all day of month i can do, but i need is events on that days show like fullcalendar.
like this http://jsbin.com/oSegeLO/1
but may events below another because events are stacked.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39728951
Stacking multiple events on the calendar days would certainly require some additional coding. I would need to find more time to work on it. The events would now need to be sorted by order of occurrence. The code is there for any other experts to edit as well.
0
 

Author Comment

by:tytdimhen
ID: 39733357
thank tommyBoy I am waitting.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39733560
I should have something to post soon.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39733612
Here's the latest jsbin version:

http://jsbin.com/oSegeLO/2/
0
 

Author Comment

by:tytdimhen
ID: 39733711
yes, that's i need and may default site is current month?(there we must click next or previous)
thank you.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39733714
0
 

Author Closing Comment

by:tytdimhen
ID: 39733728
Excellent, and support good, thank
0
 

Author Comment

by:tytdimhen
ID: 39733732
accepted and can you zip all code for me,
thank you .
0
 

Author Comment

by:tytdimhen
ID: 39733744
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39733745
Zip all code? Just copy from jsbin. It's all on one page, like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Calendar in  one row</title>
<style type="text/css">

.main {
width:1850px;
}

.month {
background-color:black;
font: bold 16px verdana;
padding: 5px;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
float:left;
width:49px;
border-right:1px solid #EEEEEE;
text-align:center;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
float:left;
width:49px;
border-right:1px solid #EEEEEE;
height:100px;
text-align:center;
overflow:visible;
}

.days #today{
font-weight: bold;
color: red;
}

.eventBar {
height:18px;
background-color:#069;
margin: 10px 0 0 2px;
position: absolute;
color:#fff;
text-align:left;
}

</style>
<script>
function buildCal(m, y, cM, cH, cDW, cD, brdr){
	var mn = ['January','February','March','April','May','June','July','August','September','October','November','December'];
	var dim = [31,0,31,30,31,30,31,31,30,31,30,31];

    // calculate the offset from Sunday at the beginning of the month
	var oD = new Date(y, m-1, 1); //DD replaced line to fix date bug when current day is 31st
	oD.od = oD.getDay()+1; //DD replaced line to fix date bug when current day is 31st
	
	var todaydate = new Date(); //DD added
	var scanfortoday = (y == todaydate.getFullYear() && m == (todaydate.getMonth() + 1))? todaydate.getDate() : 0; //DD added
	
	// check for leap year, set February number of days (28 or 29)
	dim[1] = (((oD.getFullYear() % 100 !== 0) && (oD.getFullYear() % 4 === 0)) || (oD.getFullYear() % 400 === 0)) ? 29 : 28;
	
	var t = '<div class="' + cM +'" >';
	t += '<div class="' + cH + '">' + mn[m - 1] + ' - ' + y + '</div>'; // month and year header
	
	for(w = 0; w < 5; w++) { //creates 35 repeating day names, 21 / 3 = 7, 7 x 5 = 35 total
		for(s = 0; s < 21; s += 3) t += '<div class="' + cDW + '">' + "SunMonTueWedThuFriSat".substr(s,3) + '</div>';
	}
	t += '<div class="' + cDW + '">Sun</div><div class="' + cDW + '">Mon</div>'; //add two more day names to make 37 total
	
	t += '<div style="clear:both"></div>'; //clear the float:left
	
	//collect events for this month
	var currentEvents = [], start, end, span;
	for(e = 0; e < events.length; e++) {
		var dStr = events[e].start.split(' ');
		var da = dStr[0].split('-');
		var ti = dStr[1].split(':');
		start = new Date(parseInt(da[0],10),parseInt((da[1])-1,10),parseInt(da[2],10),parseInt(ti[0],10),parseInt(ti[1],10),parseInt(ti[2],10));
		dStr = events[e].end.split(' ');
		da = dStr[0].split('-');
		ti = dStr[1].split(':');
		end = new Date(parseInt(da[0],10),parseInt((da[1])-1,10),parseInt(da[2],10),parseInt(ti[0],10),parseInt(ti[1],10),parseInt(ti[2],10));
		if((start.getMonth() + 1) == m && start.getFullYear() == y) {
			span = Math.round((end.valueOf() - start.valueOf()) / (24 * 60 * 60 * 1000)); 
			span = (events[e].allDay === "1" || events[e].allDay === "true") ? span : span + 1;
			// add additional information to the array
			events[e].span = span;  //span of the event in days
			events[e].day = start.getDate(); //date of the event
			events[e].offset = oD.od - 1; //month start offset
			events[e].startDate = start; //start date object
			events[e].endDate = end; //end date object
			events[e].used = false;  //needed later for sorting
			events[e].top = 0; //needed later for positioning
			currentEvents.push(events[e]);
		}
	}
	
	var sortedDates = [];
	for (var key in currentEvents) {
		sortedDates.push(currentEvents[key].startDate); //copy the startDates into a simple array
	}
	sortedDates.sort(date_sort_asc); //sort the start dates
	var sortedEvents = currentEvents;
	for (se = 0; se < sortedDates.length; se++) {
		for (ce = 0; ce < sortedDates.length; ce++) { //match up the unsorted with the sorted startDates.
			if(currentEvents[ce].startDate === sortedDates[se] && (!currentEvents[ce].used)) {
				sortedEvents[ce].sortKey = se; // add a sort key to the sorted array of events
				currentEvents[ce].used = true; //2 events may have exactly the same time stamp, "true" will prevent the same event from being added twice
			} 
		}
	}
	
	//look for overlapping events
	var monthDays = daysInMonth(m, y);//number of days in the current month
	var overlaps = [];
	for (de = 0; de < sortedEvents.length; de++) {
		var id = sortedEvents[de].id;
		var sDate = sortedEvents[de].startDate.getDate();
		var sYear = sortedEvents[de].startDate.getFullYear();
		var sd = sDate + '-' + sYear; //combine date-year
		var sd1, span1 = sortedEvents[de].span;
		for (re = 0; re < span1; re++) { //events can span days. Event days other than the start day can overlap another event's days
			for (ee = 0; ee < sortedEvents.length; ee++) {
				sd1 = sortedEvents[ee].startDate.getDate() + '-' + sortedEvents[de].startDate.getFullYear();//combine date-year
				if (sd === sd1 && (sortedEvents[ee].id !== id)) overlaps.push(id + ',' + sortedEvents[ee].id);//compare
			}
			sDate = ((sDate + 1) > monthDays) ? 1 : sDate + 1;//advance date for multi-day events
			sd = sDate + '-' + sYear;
		}
	}
	
	var unique = overlaps.filter(onlyUnique); //save only unique overlaps
	var unique1 = [];
	//unique array may still include duplicate reverse order overlaps like "2,7" and "7,2"
	//this loop eliminates reverse order duplicates
	for (ge = 0; ge < unique.length; ge++) {
		if (ge === 0) unique1.push(unique[ge]); //add the first item to unique1
		for (he = 0; he < unique1.length; he++) {
			var a = unique[ge].split(',');//split so we can reverse the order and compare
			if ((a[1] + ',' + a[0]) === unique1[he] ||unique[ge] === unique1[he]) {
				break; //break if both the forward or reverse of the pair exists in unique1...
			} else { //...otherwise add unique[ge] to unique1
				unique1.push(unique[ge]);
				break; 
			} 
		}
	}
	
	//only unique pairs of overlaps remain in unique1 array
	//now adjust the "top" property so later we can use it to stack events one above the other on calendar days
	for (te = 0; te < unique1.length; te++) {
		var ids = unique1[te].split(','), sortkeyA, sortKeyB;
		for (be = 0; be < sortedEvents.length; be++) {
			if (sortedEvents[be].id === ids[0]) sortkeyA = ids[0] + ',' + sortedEvents[be].sortKey;
			if (sortedEvents[be].id === ids[1]) sortkeyB = ids[1] + ',' + sortedEvents[be].sortKey;
		}
		var sortA = sortkeyA.split(',');
		var sortB = sortkeyB.split(',');
		var first = (sortA[1] > sortB[1]) ? sortA[0] : sortB[0];
		for (we = 0; we < sortedEvents.length; we++) {
			if (sortedEvents[we].id === first) {
				sortedEvents[we].top = sortedEvents[we].top + 1;
			}
		}
	}
	
	var daysPrevMonth = ((m - 1) === 0) ? dim[dim.length-1] : dim[m-2];//previous month number of days
	for(i = 1; i <= 37; i++){ // create 37 boxes for days of the month
		var x = '';
		if ((i - oD.od) < 0) { //print out previous month's days			
			x = '<span style="color:#ccc">' + (daysPrevMonth + (i - (oD.od-1))) + '</span>';
		} else if (((i - oD.od) >= 0) && ((i - oD.od) < dim[m-1])) { //print out this month's days
			x = (i - oD.od) + 1;
		} else { //print out next month's days
			x = '<span style="color:#ccc">' + (i - (dim[m-1] + (oD.od-1))) + '</span>';
		}
		
		if (x == scanfortoday) {// find today
			x = '<span id="today">' + x + '</span>'; // highlight today
	    }
		 
		for(me = 0; me < sortedEvents.length; me++) {
			if ((sortedEvents[me].day + sortedEvents[me].offset) == i) { // add in the current events
				x += '<div class="eventBar" style="margin-top:' + (sortedEvents[me].top * 20) + 'px;width:' + (((sortedEvents[me].span * 49) - 4) + sortedEvents[me].span) + 'px">' + sortedEvents[me].title + ', ' + sortedEvents[me].span + ' day event</div>';
			}
		}
		t += '<div class="' + cD + '">' + x + '</div>';
	}
	return t += '</div>';
}

//date sorting function
var date_sort_asc = function (date1, date2) {
  if (date1 > date2) return 1;
  if (date1 < date2) return -1;
  return 0;
};

//returns days in a given month and year
function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

//eliminates duplicates from an array
function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}
</script>
</head>

<body>
<button id="prev" onMouseUp="changeMonth(false)"> << </button>
<button id="next" onMouseUp="changeMonth(true)"> >> </button>
<div id="cal"></div>
<script>
var events = [
		{"id":"1","title":"11-29-2013","start":"2013-11-29 10:25:28","end":"2013-11-30 10:25:34","url":"","allDay":"1"},
		{"id":"2","title":"12-15-2013","start":"2013-12-15 10:25:47","end":"2013-12-16 10:25:39","url":"","allDay":"1"},
		{"id":"3","title":"12-26-2013","start":"2013-12-26 10:25:50","end":"2013-12-27 10:25:42","url":"","allDay":"false"},
		{"id":"4","title":"11-19-2013","start":"2013-11-19 00:00:00","end":"2013-11-23 00:00:00","url":"","allDay":"false"},
		{"id":"5","title":"12-9-2013","start":"2013-12-09 00:00:00","end":"2013-12-11 00:00:00","url":"event","allDay":"false"},
		{"id":"6","title":"12-8-2013","start":"2013-12-08 00:00:00","end":"2013-12-10 00:00:00","url":"event","allDay":"false"},
		{"id":"7","title":"12-15-2013","start":"2013-12-15 10:25:47","end":"2013-12-18 10:25:39","url":"","allDay":"1"},
		{"id":"8","title":"12-10-2013","start":"2013-12-10 10:25:47","end":"2013-12-12 10:26:39","url":"","allDay":"1"}
		];

var todaydate = new Date();
var curmonth = todaydate.getMonth() + 1; //get current month (1-12)
var curyear = todaydate.getFullYear(); //get current year
var selectedmonth = curmonth;
var selectedyear = curyear;

document.getElementById('cal').innerHTML = buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1);

function changeMonth(direction) {
	if (direction) {
		selectedyear =  ((selectedmonth+1) > 12) ? selectedyear+1 : selectedyear;
		selectedmonth = ((selectedmonth+1) > 12) ? 1 : selectedmonth+1;
	} else {
		selectedyear =  ((selectedmonth-1) == 0) ? selectedyear-1 : selectedyear;
		selectedmonth = ((selectedmonth-1) == 0) ? 12 : selectedmonth-1;
	}
	document.getElementById('cal').innerHTML = buildCal(selectedmonth ,selectedyear, "main", "month", "daysofweek", "days", 1);
}
</script>
</body>
</html>

Open in new window


Thanks for the points.
0
 

Author Comment

by:tytdimhen
ID: 39734710
hi tommyBoy some problem when i add events from 10 to 18 its only show me from 10 to 17?
http://jsbin.com/emeWuRI/1/edit event name "events day".
thank
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39734774
The ids of the events must be unique. You have same id for the last two events.
0
 

Author Comment

by:tytdimhen
ID: 39734828
no i add new id
0
 

Author Comment

by:tytdimhen
ID: 39737229
i saw it stacked if day same like event
1: "start":"2013-12-08 10:25:47","end":"2013-12-16 10:26:39"
2: "start":"2013-12-10 10:25:47","end":"2013-12-18 10:26:39"
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39740957
Latest jsbin version here:

http://jsbin.com/emeWuRI/5/
0
 

Author Comment

by:tytdimhen
ID: 39741222
uhm, thank but this only showing on 1 month and if event have another month it take along of the line, see againt.
Thank you.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39741732
Yes, I know about that. It needs additional work. I am doubting the usefulness of a one month calendar all on one line so my enthusiasm for it is low. Unfortunately, I am not going to have time to improve it further for at least a week. I am busy with another project. It might be quicker to post another question and hope that some other expert will take an interest.
0
 

Expert Comment

by:Aleksandr Balakiriev
ID: 40170637
Hi TommyBoy,

I'm looking for solution for the project which resembles to the mentioned above.
That is the project requires dividing the cell of the calendar into three parts. According to the documentation I provided the second scale where I displayed the timeline month overview and as the second scale the hours. I want to provide the third scale so as to add there the list of countries?
I need to modify the component because currently timeline supports only up two lines of scale.
Help me plz to resolve that problem, or may be there is an alternative solution!

In this link http://jsfiddle.net/inbev77/aCbWF/12/ I provided two cells scale as the days of the month & as a second scale AM/PM cell. I need  one more cell for work option.

I need the 1 & 2 columns as AM(00.00 - 12.00) PM(12-00 - 00-00), and 3rd leave blank... Though, it is embedded into the library and I believe the only way out is to modify this file http://docs.dhtmlx.com/scheduler/codebase/ext/dhtmlxscheduler_timeline.js Plz help or may be some alternatives with the fullcalendar plugin.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
C3-->D3 Line Chart 4 19
html input clean up 3 32
Angular - filter - one works but other doesn't 13 25
Asp.net mvc 5 5 22
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now