Kalender

Status
Niet open voor verdere reacties.

michaelbeersnl

Gebruiker
Lid geworden
30 nov 2011
Berichten
57
Beste helpers,

Ik ben momenteel bezig met een kalender alleen kom ik er niet uit met het genereren van de dagen.
Ik wil namelijk het volgende... de juiste dagen moeten worden gegenereerd onder het juiste weeknummer.
Alleen nu moet het ook mogelijk zijn om de start dag te kiezen van de kalender.

Hoe kan ik dit het beste doen in de volgende code?
Ik ben namelijk niet zo'n expert met javascript/jquery en doe dit eigenlijk maar weinig namelijk.

Code:
(function($)
{
	/**
	 * This is a jQuery event calender
	 *
	 * @author Michael Beers <michael@michaelbeers.nl>
	 * @copyright Copyright by Michael Beers - All rights reserved 2012-2012
	 * @version 1.0.0
	 */
	 
	/**
	 * Generates the calendar
	 *
	 * @param Array settings The settings from the calendar to generated
	 */
	$.fn.calendar = function(settings)
	{
		/* Table of Content
		================================================== 
			# Variables and Constants
			# Core function
			# Generate basic html
			# Click functions*/
			
		/* Variables and Constants
		================================================== */
		
		//html variables
		var clear,
			calendar_head,
			calendar_days,
			calendar_days_table,
			calendar_days_table_head,
			calendar_days_table_head_row,
			calendar_days_table_body,
			calendar_events,
			a_prev_month,
			a_curr_month,
			a_next_month;
			
		//calendar variables
		var date_today,
			curr_day,
			curr_day_name,
			curr_day_name_short,
			curr_date,
			curr_month,
			curr_month_name,
			curr_month_name_sort,
			curr_year;
		
		//labels and messages
		var labels = {
			prev_text: 'Vorige',
			next_text: 'Volgende',
			month_names: ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
			month_names_short: ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun','Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
			day_names: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
			day_names_short: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'],
			day_names_min: ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za']
		};
			
		//default settings
		// first_day - start day of the calendar | 0 = sunday, 1 = monday etc.
		// date - the current date of the calendar
		// events - the events in the calendar
		var settings = $.extend({
			first_day: 1,
			date: new Date(),
			events: new Array()
		}, settings);
		
		date_today = new Date();
		
		/* Core function
		================================================== */
		function generateCalendar()
		{
			/* helper variables */
			var table_head_th,
				table_body_row,
				table_body_td;
			
			/* helper variables */
			curr_day = settings.date.getDay();
			curr_day_name = labels.day_names[curr_day];
			curr_day_name_short = labels.day_names_short[curr_day];
			curr_date = settings.date.getDate();
			curr_month = settings.date.getMonth();
			curr_month_name = labels.month_names[curr_month];
			curr_month_name_short = labels.month_names_short[curr_month];
			curr_year = settings.date.getFullYear();
			
			/* generate new labels */
			a_curr_month.html('<h2>' + curr_month_name + ' '+ curr_year +'</h2>');
			
			/* generate the table */
			
			
		}
		
		/* Generate basic html
		================================================== */
		
		/* Reset the current calendar (if needed) */
		$(this).addClass('calendar');
		$(this).html('');
		clear = $('<div />').addClass('clear');
		
		
		/* Add the header html */
		calendar_head = $('<div />').addClass('calendar-head');
		a_prev_month = $('<a />').addClass('prev-month').html(labels.prev_text);
		a_curr_month = $('<a />').addClass('curr-month').html('<h2>...</h2>');
		a_next_month = $('<a />').addClass('next-month').html(labels.next_text);
		
		calendar_head.append(a_prev_month);
		calendar_head.append(a_curr_month);
		calendar_head.append(a_next_month);
		calendar_head.append(clear);
		
		/* Add the day's html */
		calendar_days = $('<div />').addClass('calendar-days');
		calendar_days_table = $('<table />');
		calendar_days_table_head = $('<thead />');
		calendar_days_table_head_row = $('<tr />');
		calendar_days_table_body = $('<tbody />');
		
		calendar_days_table.append(calendar_days_table_head);	
		calendar_days_table_head.append(calendar_days_table_head_row);	
		calendar_days_table.append(calendar_days_table_body);	
		calendar_days.append(calendar_days_table);
		calendar_days.append(clear);
		
		/* Add the event's html */
		calendar_events = $('<div />').addClass('calendar-events');
		
		/* Append every part */
		$(this).append(calendar_head);
		$(this).append(calendar_days);
		$(this).append(calendar_events);
		
		generateCalendar();
		
		/* Click functions
		================================================== */
		
		
		console.log('Calendar succesfully generated');
	};	
})(jQuery);

Alvast bedankt,

Michael
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan