• 首先要先到Google Calendar( https://calendar.google.com )中在我的日曆中選擇一想顯示的日歷，點選右鍵選擇設定和共用
  

• 進入後，到存取權限的地方將公開這個日歷的選項勾選起來，使這個日歷在其他地方也能夠被顯示出來
  

• 接著到整合日歷的地方將內嵌程式碼的部分複製起來，使得我們能將自己的Google Calendar嵌入到自己網頁當中
  

HTML

1. 接下來回到MVC的View當中，建立登入登出按鈕以及要輸入Google帳號的Text文字欄位，最後要建立一個存放Google Calendar嵌入的iframe視窗，也就是剛剛從網頁中複製下來的程式碼，只是這邊因為要輸入Google帳號時動態的更改所顯示的行事曆，所以scr以及後面帳號的部分將要利用JavaScript與jQuery來做動態網頁的互動
   

<h2>GoogleCalendar</h2>

<div class="content" id="LoginBlock">
    <div class="Login">
        <span>請先輸入Google帳號</span>
        <input type="text" id="Login" />
    </div>
    <div class="Login_button">
        <button class="btn btn-primary" id="Login_button" onclick="login()">
        觀看GoogleCalendar</button>
    </div>
</div>

<div class="Logout_button" id="Logout_button" style="display: none;">
    <button class="btn btn-primary" id="Login_button" onclick="logout()">登出</button>
</div>

<div class="content" id="showBlock" style="display: none;">
    <iframe id="mainiframe"  style="border: 0" width="800" height="600"  
     frameborder="0"  scrolling="no"></iframe>
</div>

JavaScript

1. 接著是JavaScript的部分，撰寫登入與登出按鈕的function，登入的部分先做基本的空值卡控，再利用jQuery修改html的src，並填入抓取到使用者輸入的Google帳號(account)，也利用了jQuery的toggle和hide做到動態顯示與隱藏登入與登出後的區塊
   

<script type="text/javascript">
    function login(){
        var account = $("#Login").val();
        if (account == "") {
            alert("帳號欄位不能為空，請輸入Google帳號");
        }
        else {
            $("#mainiframe", document.body).attr("src","https://calendar.
            google.com/calendar/embed?src="+ account +"%40gmail.com&ctz=
            Asia%2FTaipei");
            $("#showBlock").toggle("slow");
            $("#Logout_button").toggle("slow");
            $("#LoginBlock").hide(1000);
        }
    }

    function logout(){
        $("#showBlock").hide(1000);
        $("#Logout_button").hide(1000);
        $("#LoginBlock").toggle("slow");
    }
</script>

2. 最後我們進入到前端頁面中，在text中輸入Google帳號，點選觀看GoogleCalendar後將可以看到Google行事曆已經成功的嵌入進畫面中了，也正確的顯示Google帳號中相對應的行事曆