AboutPricingCommunityTeamsStart Free TrialLog in
Avatar of tytdimhen
tytdimhen
 asked on

Fullcalendar with days of month in 1 line

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.
HTMLJavaScript
Avatar of undefined
Last Comment
Aleksandr Balakiriev
8/22/2022 - Mon
Scott Fell
I don't fully understand your question.   Are you talking about the month, week or day view?http://arshaw.com/fullcalendar/
tytdimhen
ASKER
no, i need all day of a mon in  1 line. like this
imgthank
Roger Baklund
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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
COBOLdinosaur
Post a link to your page so we can see what code is needed to insert what you want.

Cd&
Scott Fell
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

Scott Fell
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.
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
tytdimhen
ASKER
link
and this is fullcode
thank you.
Scott Fell
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
tytdimhen
ASKER
pls allow antivirus except that's site, im using freehost,
or get full code here download
thank
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Scott Fell
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?
tytdimhen
ASKER
Scott Fell
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.
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
tytdimhen
ASKER
somebody help me
Scott Fell
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.
COBOLdinosaur
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&
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
tytdimhen
ASKER
sure, i need, width of that is no important.
Link live site i has post
live
download
jsbin
thank you all,
Tom Beck
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?
tytdimhen
ASKER
may events show below like 1 in 1 line?
and width of every events is miss?
thank you,
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tom Beck
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.
tytdimhen
ASKER
can you modify it?
Tom Beck
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
tytdimhen
ASKER
ohm, i need simple calendar can display only.Month,week,day no need another control.
thank you
Scott Fell
>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?
tytdimhen
ASKER
yes,
i need on a month (0-...real days of month).
only view
thank you.
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tom Beck
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.
tytdimhen
ASKER
yes, but data showing is not? i see event width not like u can change start,end on jsbin and see.
thank you.
Tom Beck
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?
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
tytdimhen
ASKER
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)
Tom Beck
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?
tytdimhen
ASKER
this.
i need to show all days of month and events on that days(if got).
thank you.
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tom Beck
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?
Scott Fell
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.
Tom Beck
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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
tytdimhen
ASKER
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.
Tom Beck
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.
tytdimhen
ASKER
thank tommyBoy I am waitting.
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tom Beck
I should have something to post soon.
Tom Beck
Here's the latest jsbin version:

http://jsbin.com/oSegeLO/2/
tytdimhen
ASKER
yes, that's i need and may default site is current month?(there we must click next or previous)
thank you.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Tom Beck
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
tytdimhen
ASKER
Excellent, and support good, thank
tytdimhen
ASKER
accepted and can you zip all code for me,
thank you .
tytdimhen
ASKER
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Tom Beck
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.
tytdimhen
ASKER
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
Tom Beck
The ids of the events must be unique. You have same id for the last two events.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
tytdimhen
ASKER
no i add new id
tytdimhen
ASKER
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"
Tom Beck
Latest jsbin version here:

http://jsbin.com/emeWuRI/5/
âš¡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
tytdimhen
ASKER
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.
Tom Beck
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.
Aleksandr Balakiriev
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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent