Блог

Главная - Вопросы по программированию - Добавление плагина календаря в MVC 5 / Bootstrap 3, не уверен, как импортировать файлы

Добавление плагина календаря в MVC 5 / Bootstrap 3, не уверен, как импортировать файлы

#twitter-bootstrap #asp.net-mvc-5 #fullcalendar

#twitter-bootstrap #asp.net-mvc-5 #полный календарь

Вопрос:

Я ищу, чтобы добавить плагин календаря, и я нашел два, которые оба хорошо демонстрируют, однако я понятия не имею, как импортировать их в мой проект.

Я смог импортировать небольшие плагины, которые включают только a js и css file / folder , но оба этих плагина содержат гораздо больше файлов. Я все еще новичок в MVC и Bootstrap, не говоря уже о Visual Studio, поэтому я не знаю, как установить все остальные файлы / папки.

Может кто-нибудь дать мне несколько основных инструкций, пожалуйста?

Два каландра, на которые я смотрю, это (хотелось бы использовать второй вариант, если это возможно)

Отказавшись от второго варианта, я бы «предположил», что я бы перетащил все папки и файлы .css в содержимое, а затем поместил .js в папку Scripts, но я понятия не имею, что делать со всем остальным. Я параноидально отношусь к нарушению моего проекта, поэтому я хотел бы получить некоторые рекомендации, пожалуйста.

Изображение файлов в Bootstrap-Calendar, для справки.

введите описание изображения здесь

Любая помощь с благодарностью!

Спасибо!

Комментарии:

1. По второй ссылке прокрутите вниз и прочитайте «быстрая настройка». Кажется, это отвечает на ваш вопрос.

2. святой фейспалм. Я глупый или что. >.> Спасибо, приятель.

3. Я считаю, что в full calendar есть пакет nuget, поэтому вам не нужно никуда ничего перетаскивать.

4. Это не полный календарь. Это bootstrap-calendar и не имеет пакета nuget.

5. @SergeyRomanov Он использует все свойства и настройки fullcalendar ..?

Ответ №1:

Для тех, кто ищет ответ. (с использованием FullCalendar 1.6.4)

Полная демонстрация календаря

Сначала я перешел к управлению NuGet Manager в решении и установил плагин FullCalendar.

Затем я вставил его в представление следующим образом.

* ПРИМЕЧАНИЕ: обязательно обновите два link href и @RenderScripts для расположения двух файлов fullcalendar.css и single fullcalendar.js файлы, установленные с помощью плагина FullCalendar.

 @{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    body 
    {
        margin-top: 5px;
        text-align: center;
        font-size: 13px;
        font-family: "Lucida Grande";
    }   
    #calendar 
    {
        width: 75%;
        height: 65%;
        margin: 0 auto;
        background-color: whitesmoke;
    }
</style>

<link href='/Content/fullcalendar.css' rel='stylesheet' /> //UPDATE YOUR PATH
<link href='/Content/fullcalendar.print.css' rel='stylesheet' media='print' /> //UPDATE YOUR PATH

<div id='calendar'></div>

@Scripts.Render("~/Scripts/fullcalendar.js") //UPDATE YOUR PATH
@Scripts.Render("~/Scripts/Events.js") //You could put this in the View if you want.

Events.js

     $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month'
        },
        defaultDate: 'new Date()',
        editable: true,
        events:
            [
            {
                title: 'Bi-weekly Meeting',
                start: '2014-07-09',
                color: 'red'
            },
            {
                title: 'Tournament',
                start: '2014-07-07',
                end: '2014-07-10',
                color: 'darkorange'
            },
            {
                title: 'Test Event',
                url: 'http://google.com/',
                start: '2014-07-28'
            }
            ]
});
Метки: , ,