jQuery fullCalndar Alignment and Holidays

[PCHomepage]

Since I'm not sure if this is a JavaScript or CSS question, I am posting here because it is a JavaScript plug-in. On fullCalendar, I need to move the day numbers to the upper left when they seem to default to the upper right but so far I've not had any luck. I found numerous postings through Google that suggest various CSS but they either do nothing or they bunch up all the dates to the left on top of one another. I would also like the day row to have its own border.

Also, I need the calendar to automatically show certain holidays but not necessarily all of them. Is this possible?

Here is my current code, which is using PHP to get calendar events from the database:

<script>
	$(document).ready(function() {
		$('#calendar').fullCalendar({
		weekMode: 'variable',
			header: {
				right: 'prev,next',
				left: 'title'
			},
			firstDay: 1, // Starts week on Monday
			handleWindowResize: true,
			selectable: false,
			selectHelper: true,
			select: function(start, end) {
				var title = prompt('Event Title:');
				var eventData;
				if (title) {
					eventData = {
						title: title,
						start: start,
						end: end
					};
					$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
				}
				$('#calendar').fullCalendar('unselect');
			},
			editable: true,			
			eventLimit: true, // allow "more" link when too many events
			
			
			eventRender: function(event, element, view) {
                  element.bind('click', function()  {
                         var day = ($.fullCalendar.formatDate( event.start, 'dd' ));
                         var month = ($.fullCalendar.formatDate( event.start, 'MM' ));
                         var year = ($.fullCalendar.formatDate( event.start, 'yyyy' ));
                          alert(year+'-'+month+'-'+day);
                         });
                   },
			
			
			events:
				[
					<?php
					$n = 0;
					for ($i=0;$i<=count($rowCat)-1;$i++) :
						$EntryID = $rowCat[$i]["ID"];
						$StartTime = strtotime(trim($rowCat[$i]["Start"]));
						$EndTime = strtotime(trim($rowCat[$i]["End"]));
						$DisplayName = trim($rowCat[$i]["StaffName"]);
						echo "{\ntitle: '$DisplayName',\n";
						if (!$rowCat[$i]["FirstName"] && !$rowCat[$i]["LastName"]) :
							$FormattedStart = date("Y-m-d", $StartTime);
							$FormattedEnd = ($EndTime > $StartTime) ? date('Y-m-d', strtotime('+1 day', $EndTime)): date("Y-m-d", $EndTime);
							echo "start: '$FormattedStart',\n";
							echo "end: '$FormattedEnd'";
							if (isset($_SESSION['AccessLevel']) && $_SESSION['AccessLevel'] > 1) :
								echo ",\n";
								echo "url: '/administration/events_admin.php?ID=$EntryID',";
							endif;
							echo "className: 'specialevent'\n";
							echo "}\n";
						else :
							$FormattedStart = date("Y-m-d\TH:i:s", $StartTime);
							$FormattedEnd = date("Y-m-d\TH:i:s", $EndTime);
							echo "start: '$FormattedStart',\n";
							echo "end: '$FormattedEnd'";
							if (isset($_SESSION['AccessLevel']) && $_SESSION['AccessLevel'] > 1) :
								echo ",\n";
								echo "url: '/administration/calendar_admin.php?ID=$EntryID',";
							endif;
							echo "className: 'calendarevent'\n";
							echo "}\n";
						endif;
						if(++$n !== $numRows) :
							echo ",\n\n";
						endif;
					endfor;
					?>
				],
				timeFormat: 'hh:mmt',
		});
		<?php
		if (isset($_COOKIE['CalendarDate'])) :
			$datePieces = explode('-', $_SESSION['CalendarDate']);
			$DateYear = $datePieces[0];
			$DateMonth = $datePieces[1];?>
			//$('#calendar').fullCalendar('gotoDate', '<?=$DateYear?>-<?=$DateMonth?>-01');
		<?php endif;?>
		});
</script>

 

[PCHomepage]

Thank you, I'll give it a try! It has a totally different table design that mine currently but I suppose it should be easy to adjust. I'm only just starting to use MySQLi and I've not tried PDO at all on my development system so this will be a good test.

The link you provided just gives a gray screen with the title bar across the top so I couldn't test it but, since I've made many appearance modifications, I'll test yours as a copy before committing it to the "real" thing. It shouldn't be a problem.

You may recall that we were working off-line on a form - I'll still need to be able to use it too for bulk populating of the database - unless there is a way to drag from a box showing the staff members to a date in the calendar to populate several at a time that way. It's just a thought.

 

[jpadie]

I'll test yours as a copy before committing it to the "real" thing. It shouldn't be a problem.

it's all working. there were (very) good reasons why I had to take it down fast.

unless there is a way to drag from a box showing the staff members to a date in the calendar to populate several at a time that way. It's just a thought.

for sure that's a possibility. either in the pop-up dialog or whatever. wouldn't be too difficult to allow multiples in the creation routine (i.e. on selecting a day rather than an event). equally not difficult to assign staff by dropping the staff member on to an event. although the event prototype within fullcalendar does not support the nature of a staff member or resource attached to an event. and extending the prototype probably would lead to issues. so the most you would get visually is a text and colour signifier for each staff member. that may be enough though?

 

[PCHomepage]

Your test is working now and I played with it a bit although I'm not sure anything was moving when dragged. It was hard to tell. Oh, I just realized that when I drag an event, it copies it rather than moves it and it is doing so quite well. (It's certainly colorful!)

There aren't many staff members nor will there ever be so I am thinking of a popup with a list of their names that could be dropped onto a date several at a time for perhaps a default start/end time of, say 9:30 AM to 5:30 PM. Then the entries could be edited one at a time if the times are different as some will be. But it would also need to be able to drag in special events from the same "staff" table that do no have start/end times because they are all day events or even span several days.

Should we discuss this off-line? it is quite a departure from my original question.

 

[jpadie]

Should we discuss this off-line

sure.

when I drag an event, it copies it rather than moves it

yes. to move an event use SHIFT + drag. the shift button must be pressed before the mousedown.

it would be better to have drag to move and ctrl to copy but on my system that interrupts with right mouse clicks. there's probably a workaround. neither are very touch friendly unfortunately.