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.
Alvast bedankt,
Michael
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