Функция вызова JQuery для обновления календаря - PullRequest
Новая
       4

Функция вызова JQuery для обновления календаря

0 голосов
/ 30 октября 2019

Я пытался изменить образец календаря javascript / JQuery (из [https://templatemag.com/demo/Dashio/]Component/Calendar)), чтобы динамически добавлять события из кода после изменения даты. Ниже приведен мой код для указанной программы. Специалисты по проблемам и надеждам могут дать некоторые советы или предложения.

  1. Как динамически создать список событий с помощью функции c # GetData ()? В настоящее время детали не отображаются. Детали будут отображаться правильно при использованииотмеченные примеры данных в скрипте.
  2. Как мне вызвать функции jquery showCalendar () для вызова c # GetData () и обновить вывод Календаря при изменении даты?

Заранее спасибо. 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="CS_Calendar" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calendar</title>

    <!-- Bootstrap core CSS -->
    <link href="../../Scripts/ds/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <!--external css-->
    <link href="../../Scripts/ds/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link href="../../Scripts/ds/lib/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="../../Scripts/ds/css/style.css" rel="stylesheet" />
    <link href="../../Scripts/ds/css/style-responsive.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true"></asp:ScriptManager> 
<!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
<!--main content start-->
<%-- <section id="main-content">--%>      
    <table >
    <tr>
        <td  ><h3><asp:Label ID="lblCaption" runat="server" Text="Calendar"></asp:Label></h3></td>
        <td style="width:50px" >&nbsp;</td>
        <td style="vertical-align:bottom">
            Select month
            <asp:TextBox Name="txtDate" ID="txtDate" runat="server" AutoComplete="off" ToolTip="Next service date" Width="80px" OnTextChanged="DateChanged"></asp:TextBox>
            <ajaxToolkit:CalendarExtender ID="txtDate_CalendarExtender" runat="server" Format="dd/MM/yyyy" TargetControlID="txtDate" />
            <asp:Label ID="lbl1" runat="server" ></asp:Label>
        </td>
    </tr>
    </table>
    <section class="wrapper">                 
    <!-- page start-->
    <div class="row mt">
        <section class="panel">
            <div class="panel-body">
            <div id="calendar" class="has-toolbar"></div>
            </div>
        </section>
    </div>
    <!-- page end-->
    </section>
    <!-- /wrapper -->
    <%--</section>--%>
    <!-- /MAIN CONTENT -->
    <!--main content end-->
    </form>
</body>

<script src="../../Scripts/ds/lib/jquery/jquery.min.js"></script>
<script src="../../Scripts/ds/lib/jquery-ui-1.9.2.custom.min.js"></script>
<script src="../../Scripts/ds/lib/fullcalendar/fullcalendar.min.js"></script>
<script src="../../Scripts/ds/lib/bootstrap/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="../../Scripts/ds/lib/jquery.dcjqaccordion.2.7.js"></script>
<script src="../../Scripts/ds/lib/jquery.scrollTo.min.js"></script>
<script src="../../Scripts/ds/lib/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="../../Scripts/ds/lib/common-scripts.js"></script>
<!--script for this page-->
<script >
    var date = new Date($("#txtDate").val());
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $(document).ready(function () {
        ShowCalendar();
    }); 
$("#txtDate").change(function () {
    //const [dd, mm, yyyy] = $("#txtDate").val().text.split("/");
    //date.setDate(new Date(`${yyyy}-${mm}-${dd}`)); 
    //var sDate = $("#txtDate").text();
    date.setFullYear(2019,02,20)
    $("#lblCaption").text($("#txtDate").val());
    $("#lbl1").text($("#txtDate").val());
    ShowCalendar();
});

               
      //var Script = function () {
 function ShowCalendar() {
    /* initialize the external events
    -----------------------------------------------------------------*/                                   
    $('#external-events div.external-event').each(function () {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });

    /* initialize the calendar
    -----------------------------------------------------------------*/
    $('#calendar').fullCalendar({
        header: {
            left: '',   //'prev,next'
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: false,
        droppable: false, // this allows things to be dropped onto the calendar !!!
        drop: function (date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },
        events: "#<%= GetData() %>" //[
        //{
        //    title: 'All Day Event 1',
        //    start: new Date(y, m, 1)
        //},
        //{
        //    title: 'Long Event 1',
        //    start: new Date(y, m, d - 5),
        //    end: new Date(y, m, d - 2)
        //},
        //{
        //    id: 999,
        //    title: 'Repeating Event 1',
        //    start: new Date(y, m, d - 3, 16, 0),
        //    allDay: false
        //},
        //{
        //    id: 999,
        //    title: 'Repeating Event',
        //    start: new Date(y, m, d + 4, 16, 0),
        //    allDay: false
        //},
        //{
        //    title: 'Meeting',
        //    start: new Date(y, m, d, 10, 30),
        //    allDay: false,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Lunch',
        //    start: new Date(y, m, d, 12, 0),
        //    end: new Date(y, m, d, 14, 0),
        //    allDay: false
        //},
        //{
        //    title: 'Meeting all day',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 1',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 2',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 3',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 3',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 4',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 5',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Meeting all day - 6',
        //    start: new Date(y, m, d),
        //    allDay: true,
        //    url: 'http://www.google.com/'
        //},
        //{
        //    title: 'Birthday Party',
        //    start: new Date(y, m, d + 1, 19, 0),
        //    end: new Date(y, m, d + 1, 22, 30),
        //    allDay: false
        //},
        //{
        //    title: 'Click for Google 112233',
        //    start: new Date(y, m, 28),
        //    end: new Date(y, m, 29),
        //    url: 'http://google.com/'
        //}
        //]
    });
};   //}();                  
</script>
</html>
protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {
        txtDate.Text = DateTime.Now.ToString("dd/MM/yyyy");
        setDetails();
    }
}
protected void setDetails()
{
    lblCaption.Text = string.Format("{0}", DateTime.Parse(txtDate.Text).ToString("MMM/yyyy"));        
}
protected void DateChanged(object sender, EventArgs e)
{
    //setDetails();
}
public string[] GetData()
{
    string[] data = new string[5];
    data[0] = "title: 'All Day Event 2',start: new Date(y, m, 1)";
    data[1] = @"title: 'Meeting all day',start: new Date(y, m, 2),allDay: true,url: 'http://www.google.com/'";
    data[2] = @"title: 'Meeting all day - 1',start: new Date(y, m, d - 5),allDay: true,url: 'http://www.google.com/'";
    data[3] = @"title: 'Birthday Party',start: new Date(y, m, d - 3, 12, 0),end: new Date(y, m, d - 3, 16, 0),allDay: false";
    data[4] = @"title: 'Click for Google 112233',start: new Date(y, m, 28),end: new Date(y, m, 9),url: 'http://google.com/' ";
    return data;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...