google.load("visualization", "1"); // Set callback to run when API is loaded google.setOnLoadCallback(drawVisualization); var timeline; var data; // Called when the timelineualization API is loaded. function drawVisualization() { // Create and populate a data table. data = new google.visualization.DataTable(); data.addColumn('datetime', 'start'); data.addColumn('datetime', 'end'); data.addColumn('string', 'content'); function addRow(startDate, endDate, content, backgroundColor, borderColor) { // we make our own customized layout for the events if (backgroundColor == undefined) backgroundColor = "yellow"; if (borderColor == undefined) borderColor = "gold"; var fill = endDate ? "pink" : "yellow"; var div = '
' + content + '
'; data.addRows([ [startDate, endDate, div] ]); } data.addRows([ [ new Date(2017,10,24), , '
光雕投影再創新!新北歡樂耶誕城 11/24開城慶祝

11/24~1/1

光雕投影再創新!新北歡樂耶誕城 11/24開城慶祝

'], [ new Date(2017,10,11), , '
用藝術看見漁光之美  台南漁光島藝術節11/11登場

11/11~11/26

用藝術看見漁光之美 台南漁光島藝術節11/11登場

'], [ new Date(2017,10,11), , '
秋日小旅行  11/11漫遊新社花海節

11/11~11/26

秋日小旅行 11/11漫遊新社花海節

'], [ new Date(2017,10,4), , '
涼爽秋日踏青去  11/4草嶺古道賞芒花

11/4~11/26

涼爽秋日踏青去 11/4草嶺古道賞芒花

'], [ new Date(2017,9,1), , '
屏東地景藝術節 X 懷舊眷村  10大裝置藝術好對味

10/1~2/28

屏東地景藝術節 X 懷舊眷村 10大裝置藝術好對味

'], [ new Date(2017,10,18), , '

11/18~12/24

花蓮溫泉季-溫泉專車活動

'], [ new Date(2017,9,29), , '

10/29~12/16

鹿港冬遊季(每週六、日)

'], [ new Date(2017,11,2), , '

12/2

(雲林古坑)台灣咖啡節

'], [ new Date(2017,10,5), , '
(台北)關渡自然藝術季

11/5~12/31

(台北)關渡自然藝術季

'], [ new Date(2017,8,1), , '

9/1~11/30

2017台北周末音樂不斷電

'], [ new Date(2017,10,25), , '

11/25~12/10

士林官邸菊展

'], [ new Date(2017,11,17), , '

12/17

台北馬拉松

'], [ new Date(2017,8,23), , '

9/23~11/26

0K台灣.台中自行車嘉年華

'], [ new Date(2017,10,23), , '

11/23~12/3

(台東)台灣國際衝浪公開賽

'], [ new Date(2017,10,26), , '

11/26

台中2017時代騎輪節

'], [ new Date(2017,10,26), , '

11/26

三仙台馬拉松路跑活動

'], [ new Date(2017,11,25), , '

12/25~12/26

聖誕活動與飯店訂房

'], [ new Date(2018,2,2), , '

3/2~2/16

2018台灣燈會在嘉義

'], [ new Date(2018,0,7), , '

1/7

新北市烏來峽谷馬拉松

'], [ new Date(2017,7,25), , '
(台北)關渡花海節

8/25~2/28

(台北)關渡花海節

'], [ new Date(2017,11,2), , '

12/2~1/1

宜蘭礁溪溫泉祭

'], [ new Date(2017,9,1), , '

10/1~12/24

FUN慢腳步享苗栗 暖心溫泉在泰安

'], [ new Date(2017,9,14), , '

10/14~11/30

台中谷關響浴新體驗

'], [ new Date(2017,10,4), , '

11/4~12/31

南投溫泉季

'], [ new Date(2017,11,1), , '

12/1~1/31

屏東四重溪溫泉季

'], [ new Date(2018,10,3), , '

11/3~4/24

2018台中世界花卉博覽會

'], [ new Date(2017,9,28), , '

10/28~11/26

桃園花彩節

'], [ new Date(2017,11,31), , '

12/31~1/1

跨年晚會活動、迎曙光

'], [ new Date(2018,0,5), , '

1/5~1/8

2018 WTE台北國際冬季旅展

'], [ new Date(2017,10,24), , '

11/24~11/26

(台中)中台灣湯饗《浴見幸福》

'], [ new Date(2017,10,24), , '

11/24~11/26

(台南)街藝狂饗-全國街頭表演大賽

'], [ new Date(2017,10,11), , '

11/11~12/24

高雄茂林賞紫斑蝶活動(每週六日)

'], [ new Date(2017,11,2), , '

12/2

嘉義花火音樂會

'] ]); // specify options var options = { width: "100%", height: "auto", start: new Date(2017,9,21), end: new Date(2017,11,20), showCustomTime: true, animate: false, animateZoom: false, zoomable: false, locale: "zh", axisOnTop: true, style: "box" // optional. choose "dot" (default), "box", or "none" }; // Instantiate our table object. timeline = new links.Timeline(document.getElementById('mytimeline'), options); // Attach event listeners google.visualization.events.addListener(timeline, 'select', onselect); // google.visualization.events.addListener(timeline, 'rangechange', onrangechange); // Draw our table with the data we created locally. timeline.draw(data); var newStartDate = new Date(2017,9,21); var newEndDate = new Date(2017,11,20); timeline.setVisibleChartRange(newStartDate, newEndDate); // Set the scale by hand. Autoscaling will be disabled. // Note: you can achieve the same by specifying scale and step in the // options for the timeline. timeline.setScale(links.Timeline.StepDate.SCALE.DAY, 1); $(".Map_iframe").colorbox({width:"90%", height:"90%", iframe:true}); } function onselect() { var sel = timeline.getSelection(); if (sel.length) { if (sel[0].row != undefined) { var row = sel[0].row; // alert("event " + row + " selected"); } } } // Zoom function zoom(zoomVal) { timeline.zoom(zoomVal); timeline.trigger("rangechange"); timeline.trigger("rangechanged"); } function move(moveVal) { timeline.move(moveVal); timeline.trigger("rangechange"); timeline.trigger("rangechanged"); } function moveToCurrentTime() { timeline.setVisibleChartRangeNow(); } // create a simple animation var animateTimeout = undefined; var animateFinal = undefined; function animateTo(date) { // get the new final date animateFinal = date.valueOf(); timeline.setCustomTime(date); // cancel any running animation animateCancel(); // animate towards the final date var animate = function () { var range = timeline.getVisibleChartRange(); var current = (range.start.getTime() + range.end.getTime())/ 2; var width = (range.end.getTime() - range.start.getTime()); var minDiff = Math.max(width / 1000, 1); var diff = (animateFinal - current); if (Math.abs(diff) > minDiff) { // move towards the final date var start = new Date(range.start.getTime() + diff / 4); var end = new Date(range.end.getTime() + diff / 4); timeline.setVisibleChartRange(start, end); // start next timer animateTimeout = setTimeout(animate, 50); } }; animate(); } function animateCancel () { if (animateTimeout) { clearTimeout(animateTimeout); animateTimeout = undefined; } } $(function() { $("#tab_news").html('
'); getContent_Area('tab_news','/event-calendar/js/timeline/_tab_today_news.asp',"strDate=2017/11/20"); $( "#datepicker" ).datepicker({ dateFormat: 'yy-m-d', inline: true, dayNamesMin:['日', '一', '二', '三', '四', '五', '六'], dayNamesShort:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'), day = date.getDate(), month = date.getMonth() + 1, monthX = date.getMonth(), year = date.getFullYear(); // alert(day + '-' + month + '-' + year); var dateXX = new Date(year, monthX,day ); if (dateXX.toString() == "Invalid Date") { alert("Invalid Date"); } else { animateTo(dateXX); } var thistab = 'tab_news' ; $("#tab_news").html('
'); staData = "strDate=" + year + '/' + month + '/' + day ; getContent_Area('tab_news','/event-calendar/js/timeline/_tab_today_news.asp',staData); } }); function getContent_Area(_showid, _show, _staData){ var htmlUrl = _show; if(_show.indexOf("#")!=-1){ var sp = _show.split("#"); htmlUrl = sp[0]; } $.ajax({ type: "POST", contentType: "application/x-www-form-urlencoded;charset=UTF-8", url: htmlUrl, data:_staData, complete: function(xhr, status){ $("#"+_showid).html(xhr.responseText); $(".Map_iframe").colorbox({width:"90%", height:"90%", iframe:true}); } }); } }); $( window ).load(function() { $(".Map_iframe").colorbox({width:"90%", height:"90%", iframe:true}); })