如何使用 javascript 将事件添加到谷歌日历？

Question

我有一个搜索电影的应用程序，然后允许用户将此电影添加到谷歌日历。 然而，我找不到任何关于如何将此事件添加到谷歌日历的好教程。

索引.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moovie planner</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/app.js" defer></script>
    <link rel="shortcut icon" type="image/png" href="./images/favicon.png"/>
</head>
<body>
    <header>
        <h1>Enter moovie name:</h1>
        <form id="form">
            <input id="search"/>
        </form>
        <button id="search-button">search</button>
    </header>
    <main id="main"></main>
</body>
</html>

js/app.js

$(document).ready(() => {
    const apiUrl = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1';
const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
    "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

    const main = $('#main');
    const form = $('#form');
    const search = $('#search');
    const button = $('#search-button');

    showMovies(apiUrl);

    function showMovies(url){
        fetch(url).then(res => res.json())
        .then((data) => {
            console.log(data);
        data.results.forEach(element => {
    
            const container = $('<div></div>').addClass('container');
            
            const column1 = $('<div></div>').addClass('column');
            const column2 = $('<div></div>').addClass('column');
    
            const image = document.createElement('img');
            image.src = IMGPATH + element.poster_path;
            column2.append(image);
    
            const name = $('<h2></h2>').text(element.title);
    
            const rating = $('<div></div>').addClass('rating').html(
                convertToStars(element.vote_average)
            );
            
            const description = $('<div></div>').text(element.overview);
    
            const pickerContainer = $('<div></div>').addClass('picker-container');
    
            const dateRow = $('<div></div>').addClass('row');
            const dateText = $('<p></p>').html('<strong>Select a date:</strong>');
    
            const dateInput = $('<input/>').attr('type','date');
            
            dateRow.append(dateText,dateInput);
    
            const timeRow = $('<div></div>').addClass('row');
            const timeText = $('<p></p>').html('<strong>Select a time:</strong>');
            const timeInput = $('<input/>').attr('type','time');

            timeRow.append(timeText,timeInput);
    
            const submitButton = $('<button></button>').addClass('submit-button').text('Add to google calendar').click(() => {
                console.log(timeInput.val());
                console.log(dateInput.val());

            });
    
            pickerContainer.append(dateRow,timeRow,submitButton);
    
            column1.append(name,rating,description,pickerContainer);
    
            container.append(column1,column2);
            main.append(container);
            
        }); 
    });
    }
    
    const convertToStars = (rating) => {
        const numberOfStars = Math.round(rating / 2);
        let stars = '';
        for(let i = 0; i < numberOfStars; i++){
            stars = stars + '&starf;';
        }
        return stars;
    }
    
    button.click((e) => {
        e.preventDefault();
        main.empty();
         
        const searchTerm = search.val();
    
        if (searchTerm) {
            showMovies(SEARCHAPI + searchTerm);
            search.value = searchTerm;
        }
    });
    


});

css/style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
header{
    width: 100%;
    height: 50px;
    background: gray;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #ccc;
}
header > h1{
    margin-left: 20px;
    margin-right: 20px;
    color: #fff;
}
header, h1, button, body{
    margin-top: 0px;
}
header > a {
    text-decoration: none;
}
header > form{
    display: flex;
    align-items: center;
}
#search{
    width: 230px;
    height: 30px;
    border: 1px solid black;
    outline: none;
    padding-left: 15px;
}
main{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.container, .row {
    display:flex;
    flex-direction: row;
    width: 100%;
    margin-left: 100px;
}
.column{
    display: flex;
    flex-direction: column;
    width: 50%;
    margin:10px 10px;
    align-items: center;
    justify-content: center;
}

img{
    display: block;
    max-width:230px;
    max-height:500px;
    width: auto;
    height: auto;

}

button{
    margin-left: 20px;
    font-weight: bold;
    width: 200px;
    padding: 5px;
}
.rating{
    color:red;
    font-size: 20px;
}
.picker-container{
    display:flex;
    flex-direction: column;
    margin-top: 20px;

    align-items: center;
    justify-content: center;
    row-gap: 10px;
}
.picker-container > .row > p{
    margin-right: 10px;
}

但是，我不知道如何继续，因为实际上没有任何指导，也没有任何关于如何仅使用 javascript 将事件添加到任何用户日历的指南。

任何帮助高度赞赏

Answer 1

更新：我解决了。 我尝试运行谷歌日历的快速入门，但是，谷歌验证应用程序需要几个小时（文档中没有提到）。 之后一切都很顺利。

如何使用 javascript 将事件添加到谷歌日历？

问题描述

1 个解决方案

解决方案1
0 2021-12-24 21:46:17

如何使用 javascript 将事件添加到谷歌日历？

问题描述

1 个解决方案

解决方案1 0 2021-12-24 21:46:17

解决方案1
0 2021-12-24 21:46:17