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.

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

thank

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.

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.

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

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

added to jsbin
thank,

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.

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&

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,

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.

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.

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?

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.

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.

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.

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.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tytdimhen

ASKER

Excellent, and support good, thank

tytdimhen

ASKER

accepted and can you zip all code for me,
thank you .

tytdimhen

ASKER

tommyBoy
this
https://www.experts-exchange.com/questions/28323690/Fullcalendar-with-days-of-month-in-1-line-with-day-month.html

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.

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/

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.