Skip to content

Commit

Permalink
Merge pull request #17 from timekit-io/fullcalendar-language-support
Browse files Browse the repository at this point in the history 
Localization of time/date with FullCalendar's language files
  • Loading branch information
@laander
laander committed Nov 23, 2015
2 parents 34e7157 + 557d7d0 commit 5fd66d5
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 53 deletions.
43 changes: 33 additions & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ timekitCreateEvent: {

**FullCalendar**

You can supply and overwrite all the FullCalendar settings directly here.
You can supply and override all the [FullCalendar settings](http://fullcalendar.io/docs/):

```javascript
fullCalendar: {
Expand All @@ -199,23 +199,46 @@ fullCalendar: {
right: 'today, prev, next'
},
views: {
basic: {
columnFormat: 'dddd M/D',
},
agenda: {
columnFormat: 'ddd\n M/D',
slotLabelFormat: 'ha',
displayEventEnd: false
displayEventEnd: false
}
},
timeFormat: 'h:mma',
allDaySlot: false,
scrollTime: '08:00:00',
timezone: 'local',
defaultView: sizing.view, // Inserted based on the current width of the widget
height: sizing.height, // Inserted based on the current width of the widget
eventClick: fn(), // Handled internally in Booking.js (overwrite if you want to replace the booking page)
windowResize: fn() // Recalculates the view and height based on the widget's width (if resized)
eventClick: function(event), // Handled internally in Booking.js (overwrite if you want to replace the booking page)
windowResize: function(view) // Recalculates the view and height based on the widget's width (if resized)
}
```
*See below for FullCalendar language support.*
**Localization**
For quick localization of time/date formats, we provide a simple "preset" setting, `timeDateFormat`, that sets a range of different FullCalendar and localization settings.
By default, it's set to "12-hour clock, M/D/Y date format, Sunday first day of week" (`12h-mdy-sun`). It can be changed to "24-hour clock, D/M/Y date format, Monday first day of week" (`24h-dmy-mon`).
```javascript
localization: {
timeDateFormat: '12h-mdy-sun', // Default, alternative mode "24h-dmy-mon",
bookingDateFormat: 'MMMM D, YYYY', // Override the default date format on the booking page
bookingTimeFormat: 'h:mma' // Override the default time format on the booking page
},
```
For full language support, FullCalendar also takes a ["lang" option](http://fullcalendar.io/docs/text/lang/), accompanied by a language file.
Remember to set `localization.timeDateFormat` to false so it doesn't override the language file's settings. See `/examples/language.htm` for full implementation example.
```javascript
fullCalendar: {
lang: 'de'
},
localization: {
timeDateFormat: false
}
```
Expand Down
37 changes: 37 additions & 0 deletions examples/language.htm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Booking.js FullCalendar language support</title>
<style type="text/css">
body { background-color: #E6E6E6; max-width: 700px; margin: 0 auto; }
</style>
</head>
<body>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../dist/booking.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/lang/de.js"></script>
<div id="bookingjs">
<script type="text/javascript">
TimekitBooking().init({
name: 'Doc German',
email: 'marty.mcfly@timekit.io',
apiToken: 'XT1JO879JF1qUXXzmETD5ucgxaDwsFsd',
calendar: '22f86f0c-ee80-470c-95e8-dadd9d05edd2',
avatar: '../misc/avatar-doc.jpg',
timekitConfig: {
app: 'bookingjs-demo'
},
fullCalendar: {
lang: 'de'
},
localization: {
timeDateFormat: false
}
});
</script>
</div>

</body>
</html>
1 change: 0 additions & 1 deletion examples/single.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
apiToken: 'XT1JO879JF1qUXXzmETD5ucgxaDwsFsd',
calendar: '22f86f0c-ee80-470c-95e8-dadd9d05edd2',
avatar: '../misc/avatar-doc.jpg',
autoload: true,
timekitConfig: {
app: 'bookingjs-demo'
}
Expand Down
67 changes: 57 additions & 10 deletions src/defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Default configuration for for Booking.js
*/

module.exports = {
var primary = {

// email: '',
// apiToken: '',
Expand Down Expand Up @@ -34,16 +34,10 @@ module.exports = {
right: 'today, prev, next'
},
views: {
basic: {
columnFormat: 'dddd M/D',
},
agenda: {
columnFormat: 'ddd\n M/D',
slotLabelFormat: 'ha',
displayEventEnd: false
}
},
timeFormat: 'h:mma',
allDaySlot: false,
scrollTime: '08:00:00',
timezone: 'local',
Expand All @@ -52,10 +46,63 @@ module.exports = {
},
localization: {
showTimezoneHelper: true,
timeDateFormat: '12h-mdy-sun',
bookingDateFormat: 'MMMM D, YYYY',
bookingTimeFormat: 'h:mma'
timeDateFormat: '12h-mdy-sun'
},
callbacks: {}

};

// Preset: timeDateFormat = '24h-dmy-mon'
var timeDateFormat24hdmymon = {

fullCalendar: {
timeFormat: 'HH:mm',
firstDay: 1,
views: {
basic: {
columnFormat: 'dddd D/M'
},
agenda: {
columnFormat: 'ddd\n D/M',
slotLabelFormat: 'HH:mm'
}
}
},
localization: {
bookingDateFormat: 'D. MMMM YYYY',
bookingTimeFormat: 'HH:mm'
}

};

// Preset: timeDateFormat = '12h-mdy-sun'
var timeDateFormat12hmdysun = {

fullCalendar: {
timeFormat: 'h:mma',
firstDay: 0,
views: {
basic: {
columnFormat: 'dddd M/D',
},
agenda: {
columnFormat: 'ddd\n M/D',
slotLabelFormat: 'ha'
}
},
},
localization: {
bookingDateFormat: 'MMMM D, YYYY',
bookingTimeFormat: 'h:mma'
}

};

// Export objects
module.exports = {
primary: primary,
presets: {
timeDateFormat24hdmymon: timeDateFormat24hdmymon,
timeDateFormat12hmdysun: timeDateFormat12hmdysun
}
};
65 changes: 33 additions & 32 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@
*/

// External depenencies
require('fullcalendar');
var $ = require('jquery');
var timekit = require('timekit-sdk');
var moment = require('moment');
var $ = require('jquery');
window.fullcalendar = require('fullcalendar');
var moment = window.moment = require('moment');
var timekit = require('timekit-sdk');

// Internal dependencies
var utils = require('./utils');
var utils = require('./utils');
var defaultConfig = require('./defaults');

// Main library
Expand All @@ -41,29 +41,31 @@ function TimekitBooking() {

// Make sure DOM element is ready and clean it
var prepareDOM = function() {

rootTarget = $(config.targetEl);
if (rootTarget.length === 0) {
throw new Error('TimekitBooking - No target DOM element was found (' + config.targetEl + ')');
}
rootTarget.addClass('bookingjs');
rootTarget.children(':not(script)').remove();

};

// Setup the Timekit SDK with correct credentials
var timekitSetup = function() {
var args = {};

var args = {};
$.extend(true, args, config.timekitConfig);

timekit.configure(args);
timekit.setUser(config.email, config.apiToken);

};

// Fetch availabile time through Timekit SDK
var timekitFindTime = function() {

var args = { emails: [config.email] };

$.extend(args, config.timekitFindTime);

utils.doCallback('findTimeStarted', config, args);
Expand All @@ -80,6 +82,7 @@ function TimekitBooking() {
utils.doCallback('findTimeFailed', config, response);
throw new Error('TimekitBooking - An error with Timekit FindTime occured, context: ' + response);
});

};

// Calculate and display timezone helper
Expand Down Expand Up @@ -124,6 +127,7 @@ function TimekitBooking() {
utils.doCallback('getUserTimezoneFailed', config, response);
throw new Error('TimekitBooking - An error with Timekit getUserTimezone occured, context: ' + response);
});

};

// Setup and render FullCalendar
Expand Down Expand Up @@ -217,9 +221,13 @@ function TimekitBooking() {
utils.doCallback('showBookingPage', config);

var template = require('./templates/booking-page.html');

var dateFormat = config.localization.bookingDateFormat || moment.localeData().longDateFormat('LL');
var timeFormat = config.localization.bookingTimeFormat || moment.localeData().longDateFormat('LT');

bookingPageTarget = $(template({
chosenDate: moment(eventData.start).format(config.localization.bookingDateFormat),
chosenTime: moment(eventData.start).format(config.localization.bookingTimeFormat) + ' to ' + moment(eventData.end).format(config.localization.bookingTimeFormat),
chosenDate: moment(eventData.start).format(dateFormat),
chosenTime: moment(eventData.start).format(timeFormat) + ' - ' + moment(eventData.end).format(timeFormat),
start: moment(eventData.start).format(),
end: moment(eventData.end).format(),
closeIcon: require('!svg-inline!./assets/close-icon.svg'),
Expand Down Expand Up @@ -266,6 +274,7 @@ function TimekitBooking() {
utils.doCallback('closeBookingPage', config);

bookingPageTarget.removeClass('show');

setTimeout(function(){
bookingPageTarget.remove();
}, 200);
Expand All @@ -279,10 +288,10 @@ function TimekitBooking() {

e.preventDefault();

var formElement = $(form);

utils.doCallback('submitBookingForm', config);

var formElement = $(form);

// Abort if form is submitting, have submitted or does not validate
if(formElement.hasClass('loading') || formElement.hasClass('success') || !e.target.checkValidity()) {
var submitButton = formElement.find('.bookingjs-form-button');
Expand Down Expand Up @@ -312,6 +321,7 @@ function TimekitBooking() {
utils.doCallback('createEventFailed', config, response);
throw new Error('TimekitBooking - An error with Timekit createEvent occured, context: ' + response);
});

};

// Create new event through Timekit SDK
Expand All @@ -331,6 +341,7 @@ function TimekitBooking() {
utils.doCallback('createEventStarted', config, args);

return timekit.createEvent(args);

};

// Render the powered by Timekit message
Expand Down Expand Up @@ -362,31 +373,15 @@ function TimekitBooking() {
var newConfig = {};
var localizationConfig = {};

// Handle FullCalendar shorthand localization
// Handle presets
if(suppliedConfig.localization && suppliedConfig.localization.timeDateFormat === '24h-dmy-mon') {
localizationConfig = {
fullCalendar: {
timeFormat: 'HH:mm',
firstDay: 1,
views: {
agenda: {
columnFormat: 'ddd\n D/M',
slotLabelFormat: 'HH:mm'
},
basic: {
columnFormat: 'dddd D/M'
}
}
},
localization: {
bookingDateFormat: 'D. MMMM YYYY',
bookingTimeFormat: 'HH:mm'
}
};
localizationConfig = defaultConfig.presets.timeDateFormat24hdmymon;
} else if (suppliedConfig.localization && suppliedConfig.localization.timeDateFormat === '12h-mdy-sun') {
localizationConfig = defaultConfig.presets.timeDateFormat12hmdysun;
}

// Extend the default config with supplied settings
$.extend(true, newConfig, defaultConfig, localizationConfig, suppliedConfig);
$.extend(true, newConfig, defaultConfig.primary, localizationConfig, suppliedConfig);

// Check for required settings
if(!newConfig.email || !newConfig.apiToken || !newConfig.calendar) {
Expand All @@ -402,7 +397,9 @@ function TimekitBooking() {

// Get library config
var getConfig = function() {

return config;

};

// Render method
Expand Down Expand Up @@ -457,15 +454,19 @@ function TimekitBooking() {
};

var destroy = function() {

prepareDOM();
config = {};
return this;

};

// The fullCalendar object for advanced puppeting
var fullCalendar = function() {

if (calendarTarget.fullCalendar === undefined) { return undefined; }
return calendarTarget.fullCalendar.apply(calendarTarget, arguments);

};

// Expose methods
Expand Down

0 comments on commit 5fd66d5

Please sign in to comment.