<commit_before><!-- Import Polymer -->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../core-pages/core-pages.html">
<link rel="import" href="../../core-icon-button/core-icon-button.html">
<link rel="import" href="./calendar-month.html">
<link rel="import" href="./calendar-week.html">
<link rel="import" href="./calendar-day.html">
<link rel="import" href="./event-list.html">

<!-- Container element for all calendar views -->
<polymer-element name="event-calendar" attributes="curDate events header startHour view" layout vertical>
	<style>
		:host, event-calendar {
			display: block;
			height: 100%;
		}
		core-pages {
			height: 100%;
			display: block;
		}
		event-calendar /deep/ .monthHeader, 
		event-calendar /deep/ .weekHeader, 
		event-calendar /deep/ .dayHeader, 
		event-calendar /deep/ .listHeader {
			background-color: grey; 
			color: white;
		}
		.dayHeader {
			background-color: grey;
			color: white;
			text-align: center;
		}
	</style>
	<template>
		<!-- Unified header -->
		<template if="{{header != null}}">
			<div layout horizontal center justified class="{{view + 'Header'}}">
				<core-icon-button icon="apps" active?="{{view == 'month'}}" value="month" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<core-icon-button icon="view-week" active?="{{view == 'week'}}" value="week" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<core-icon-button icon="view-day" active?="{{view == 'day'}}" value="day" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<core-icon-button icon="view-list" active?="{{view == 'list'}}" value="list" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<div flex></div>
				<template if="{{view=='month'}}">
					<core-icon-button icon="chevron-left" on-tap="{{monthBack}}"></core-icon-button>
					<div>{{formatMonth(curDate)}}</div>
					<core-icon-button icon="chevron-right" on-tap="{{monthForward}}"></core-icon-button>
					<div flex></div>
					<core-icon-button icon="today" on-tap="{{todayTapped}}"></core-icon-button>
				</template>
				<template if="{{view=='week'}}">
					<core-icon-button icon="chevron-left" on-tap="{{weekBack}}"></core-icon-button>
					<div>{{formatWeek($.calWeek.days)}}</div>
					<core-icon-button icon="chevron-right" on-tap="{{weekForward}}"></core-icon-button>
					<div flex></div>
					<core-icon-button icon="today" on-tap="{{todayTapped}}"></core-icon-button>
				</template>
				<template if="{{view=='day'}}">
					<core-icon-button icon="chevron-left" on-tap="{{dayBack}}"></core-icon-button>
					<div>{{formatDate(curDate)}}</div>
					<core-icon-button icon="chevron-right" on-tap="{{dayForward}}"></core-icon-button>
					<div flex></div>
					<core-icon-button icon="today" on-tap="{{todayTapped}}"></core-icon-button>
				</template>
				<template if="{{view=='list'}}">
					<div layout center center-justified class="header">Event List</div>
					<div flex></div>
				</template>
			</div>
			<!-- secondary header for days in week view -->
			<template if="{{view=='week'}}">
				<div horizontal layout>
					<template repeat="{{day, idx in $.calWeek.days}}">
						<div flex class="dayHeader">{{formatDateInWeek(day)}}</div>
					</template>
				</div>
			</template>
		</template>
		<core-pages flex selected="{{viewPage[view]}}">
			<calendar-month curDate="{{curDate}}" events="{{events}}" header="{{header}}"></calendar-month>
			<calendar-week id="calWeek" flex curDate="{{curDate}}" events="{{events}}" header="{{header}}" startHour="{{startHour}}"></calendar-week>
			<calendar-day date="{{curDate}}" events="{{events}}" header="{{header}}" scroll startHour="{{startHour}}"></calendar-day>
			<event-list events="{{events}}" header="{{header}}"></event-list>
		</core-pages>
	</template>
	<script>
		Polymer('event-calendar', {
			// Fires when an instance of the element is created
			created: function() {
				this.events = [];
				this.viewPage = {
					'month' : 0,
					'week'	: 1,
					'day'		: 2,
					'list'	: 3 
				};
				this.view = 'month';
			},
			eventsChanged: function() {
				// Validate events (N.B. stops on first invalid event)
				for (var i = 0; i < this.events.length; i++) {
					var ev = this.events[i];
					// Each events must have a start & stop.
					if (!ev.start || !ev.end) {
						this.asyncFire('event-calendar-error', 'Each event must have a start and end.');
						this.async(function() {
							this.events.splice(i, 1);
						});
						break;
					}
					// Make sure each start and stop is a moment or moment-compatible.
					if (!moment.isMoment(ev.start))
						ev.start = moment(ev.start);
					if (!moment.isMoment(ev.end))
						ev.end = moment(ev.end);
					// Ensure the start < end.
					if (ev.end < ev.start) {
						this.asyncFire('event-calendar-error', 'event.start must precede event.end');
						this.async(function() {
							this.events.splice(i, 1);
						}, i);
						break;
					}
				}
			},
			formatMonth: function(date) {
				return moment(date).format('MMM').toUpperCase();
			},
			formatWeek: function(days) {
				if (!days || !days.length) return;
				return days[0].format('M/D') + '-' + days[6].format('M/d');
			},
			formatDate: function(date) {
				if (date) {
					return date.format('ddd, MMM D').toUpperCase();
				}
			},
			formatDateInWeek: function(date) {
				if (date) return date.format('ddd M/D');
			},
			viewButtonTapped: function(event, detail, sender) {
				this.view = sender.getAttribute('value');
				return;
			},
			todayTapped: function() {
				this.curDate = moment();
			},
			monthBack: function() {
				this.curDate = moment(this.curDate).subtract(1, 'month');
			},
			monthForward: function() {
				this.curDate = moment(this.curDate).add(1, 'month');
			},
			weekBack: function() {
				this.curDate = moment(this.curDate).subtract(1, 'week');
			},
			weekForward: function() {
				this.curDate = moment(this.curDate).add(1, 'week');
			},
			dayBack: function() {
				// This syntax, by assigning a new object to the bound property, forces
				// updates and change events.
				this.curDate = moment(this.curDate).subtract(1, 'day');
			},
			dayForward: function() {
				this.curDate = moment(this.curDate).add(1, 'day');
			}
		});
	</script>

</polymer-element><commit_msg>Added default/override header styles and docs<commit_after><!-- Import Polymer -->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../core-pages/core-pages.html">
<link rel="import" href="../../core-icon-button/core-icon-button.html">
<link rel="import" href="./calendar-month.html">
<link rel="import" href="./calendar-week.html">
<link rel="import" href="./calendar-day.html">
<link rel="import" href="./event-list.html">

<!-- Container element for all calendar views -->
<polymer-element name="event-calendar" attributes="curDate events header startHour view" layout vertical>
	<style>
		:host, event-calendar {
			display: block;
			height: 100%;
		}
		core-pages {
			height: 100%;
			display: block;
		}
		event-calendar /deep/ .header,
		event-calendar /deep/ .monthHeader, 
		event-calendar /deep/ .weekHeader, 
		event-calendar /deep/ .dayHeader, 
		event-calendar /deep/ .listHeader {
			background-color: grey; 
			color: white;
		}

	</style>
	<template>
		<!-- Unified header -->
		<template if="{{header != null}}">
			<div layout horizontal center justified class="header {{view + 'Header'}}">
				<core-icon-button icon="apps" active?="{{view == 'month'}}" value="month" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<core-icon-button icon="view-week" active?="{{view == 'week'}}" value="week" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<core-icon-button icon="view-day" active?="{{view == 'day'}}" value="day" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<core-icon-button icon="view-list" active?="{{view == 'list'}}" value="list" on-tap="{{viewButtonTapped}}"></core-icon-button>
				<div flex></div>
				<template if="{{view=='month'}}">
					<core-icon-button icon="chevron-left" on-tap="{{monthBack}}"></core-icon-button>
					<div>{{formatMonth(curDate)}}</div>
					<core-icon-button icon="chevron-right" on-tap="{{monthForward}}"></core-icon-button>
					<div flex></div>
					<core-icon-button icon="today" on-tap="{{todayTapped}}"></core-icon-button>
				</template>
				<template if="{{view=='week'}}">
					<core-icon-button icon="chevron-left" on-tap="{{weekBack}}"></core-icon-button>
					<div>{{formatWeek($.calWeek.days)}}</div>
					<core-icon-button icon="chevron-right" on-tap="{{weekForward}}"></core-icon-button>
					<div flex></div>
					<core-icon-button icon="today" on-tap="{{todayTapped}}"></core-icon-button>
				</template>
				<template if="{{view=='day'}}">
					<core-icon-button icon="chevron-left" on-tap="{{dayBack}}"></core-icon-button>
					<div>{{formatDate(curDate)}}</div>
					<core-icon-button icon="chevron-right" on-tap="{{dayForward}}"></core-icon-button>
					<div flex></div>
					<core-icon-button icon="today" on-tap="{{todayTapped}}"></core-icon-button>
				</template>
				<template if="{{view=='list'}}">
					<div layout center center-justified class="header">Event List</div>
					<div flex></div>
				</template>
			</div>
			<!-- secondary header for days in week view -->
			<template if="{{view=='week'}}">
				<div horizontal layout>
					<template repeat="{{day, idx in $.calWeek.days}}">
						<div flex class="dayHeader">{{formatDateInWeek(day)}}</div>
					</template>
				</div>
			</template>
		</template>
		<core-pages flex selected="{{viewPage[view]}}">
			<calendar-month curDate="{{curDate}}" events="{{events}}" header="{{header}}"></calendar-month>
			<calendar-week id="calWeek" flex curDate="{{curDate}}" events="{{events}}" header="{{header}}" startHour="{{startHour}}"></calendar-week>
			<calendar-day date="{{curDate}}" events="{{events}}" header="{{header}}" scroll startHour="{{startHour}}"></calendar-day>
			<event-list events="{{events}}" header="{{header}}"></event-list>
		</core-pages>
	</template>
	<script>
		Polymer('event-calendar', {
			// Fires when an instance of the element is created
			created: function() {
				this.events = [];
				this.viewPage = {
					'month' : 0,
					'week'	: 1,
					'day'		: 2,
					'list'	: 3 
				};
				this.view = 'month';
			},
			eventsChanged: function() {
				// Validate events (N.B. stops on first invalid event)
				for (var i = 0; i < this.events.length; i++) {
					var ev = this.events[i];
					// Each events must have a start & stop.
					if (!ev.start || !ev.end) {
						this.asyncFire('event-calendar-error', 'Each event must have a start and end.');
						this.async(function() {
							this.events.splice(i, 1);
						});
						break;
					}
					// Make sure each start and stop is a moment or moment-compatible.
					if (!moment.isMoment(ev.start))
						ev.start = moment(ev.start);
					if (!moment.isMoment(ev.end))
						ev.end = moment(ev.end);
					// Ensure the start < end.
					if (ev.end < ev.start) {
						this.asyncFire('event-calendar-error', 'event.start must precede event.end');
						this.async(function() {
							this.events.splice(i, 1);
						}, i);
						break;
					}
				}
			},
			// Formatting functions to support header display
			formatMonth: function(date) {
				return moment(date).format('MMM').toUpperCase();
			},
			formatWeek: function(days) {
				if (!days || !days.length) return;
				return days[0].format('M/D') + '-' + days[6].format('M/d');
			},
			formatDate: function(date) {
				if (date) {
					return date.format('ddd, MMM D').toUpperCase();
				}
			},
			formatDateInWeek: function(date) {
				if (date) return date.format('ddd M/D');
			},
			// Event handlers
			viewButtonTapped: function(event, detail, sender) {
				this.view = sender.getAttribute('value');
				return;
			},
			todayTapped: function() {
				this.curDate = moment();
			},
			// Date navigation
			monthBack: function() {
				this.curDate = moment(this.curDate).subtract(1, 'month');
			},
			monthForward: function() {
				this.curDate = moment(this.curDate).add(1, 'month');
			},
			weekBack: function() {
				this.curDate = moment(this.curDate).subtract(1, 'week');
			},
			weekForward: function() {
				this.curDate = moment(this.curDate).add(1, 'week');
			},
			dayBack: function() {
				// This syntax, by assigning a new object to the bound property, forces
				// updates and change events.
				this.curDate = moment(this.curDate).subtract(1, 'day');
			},
			dayForward: function() {
				this.curDate = moment(this.curDate).add(1, 'day');
			}
		});
	</script>

</polymer-element>
{'fraction_non_alphanumeric': 0.20879295294024283, 'fraction_numerical': 0.0033330688040631696, 'mean_word_length': 3.4264137688795224, 'pattern_counts': {'":': 0, '<': 195, '<?xml version=': 0, '>': 189, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5075741', 'n_tokens_mistral': 5077, 'n_tokens_neox': 4108, 'n_words': 833}