google　calendar　responsive

2016年5月29日

・view

<ul style="display:table;table-layout:fixed;width:100%;">
	<li style="color:#fff;padding:2px;text-align:center;display:table-cell;background-color:#D47F1E">撮影会</li>
	<li style="color:#fff;padding:2px;text-align:center;display:table-cell;background-color:#8C66D9">撮影会</li>
	<li style="color:#fff;padding:2px;text-align:center;display:table-cell;background-color:#3C995B">予約空き在り</li>
	<li style="color:#fff;padding:2px;text-align:center;display:table-cell;background-color:#AD2D2D">予約空き無し</li>
</ul>
<iframe src="http://localhost/xxx/wp-content/themes/xxx/template/gcalendar-wrapper.php?showTitle=0&amp;showPrint=0&amp;//-----// width="800" height="600" frameborder="0" scrolling="no"></iframe>
<style></style>

・gcalendar-wrapper.php

Easy Color Customization for Embedded Google Calendars

.rb-n,
.te-t,
.te-s {
	font-family:meiryo !important;
	font-size: 117%;
}
.rb-n,
.te-t,
.te-s {
	font-family:meiryo !important;
	font-size: 100%;
}
td#calendarTabs1 div.ui-rtsr-selected, div.view-cap, div.view-container-border {
	background-color: #FFCCCC !important;
}
table.mv-daynames-table {
	background-color: #FF8383 !important;
	color: #000000 !important;
}

・jquery

$(function(){
	var timer = false;
	var windowWidth = $(window).width();
	$(window).on('load resize', function() {
		var ww = $(window).width();
		if(windowWidth != ww) {
			if(timer !== false) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				var w = $('#main').width();
				$('iframe').css('width', w);
			}, 200);
		}
	});
});