Paul-DS / bootstrap-year-calendar

[DEPRECATED] A fully customizable year calendar widget, for boostrap !
Apache License 2.0
294 stars 243 forks source link

Bootstrap full calendar functionality in Asp.Net MVC with Angular JS with SQL. #169

Open mangalagiri opened 6 years ago

mangalagiri commented 6 years ago

Hi Paul, Thank you for published calendar project. Need help on bootstrap full calendar functionality. I want to implement same functionality in Asp.Net MVC, Angular JS with SQL. Please help me how to get full code.

Madhu

Oracularman commented 6 years ago

Thank you Paul, for a wonderful Calendar. Got it working in ASP.NET Core 2.0 MVC:

Controller:

public JsonResult GetCalendaryr() {

        var OwnerId = this.User.FindFirstValue(ClaimTypes.NameIdentifier);

        var eventList = (from e in _context.Events.Where(d => d.IsDeleted == false).Where(o => o.UserID == UserId)
                        select new
                        {
                            startdate = string.Format("{0:yyyy-MM-dd}", e.Timestamp.Date),
                            enddate = string.Format("{0:yyyy-MM-dd}", e.Timestamp.Date),
                            color = "green"
                        }).Distinct();

        var rows = eventList.ToArray();
        return Json(rows);
    }

VIEW:

Layout.cshtml

<link rel="stylesheet" type="text/css" href="~/css/bootstrap-year-calendar.min.css">
 <link rel="stylesheet" type="text/css" href="~/css/bootstrap-year-calendar.css">

Calendar.cshtml

<span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 18px; white-space: pre-wrap; background-color: rgb(255, 255, 255);"><div id="calendar"></div></span>

<script type="text/javascript"> 
$(document).ready(function() { 
    // show current year by default
    var currentYear = new Date().getFullYear();
     $.ajax({ 
            url: "/Event/GetCalendaryr",
            type: 'GET',
            contentType: 'application/json',
            dataType: 'json',
            success: function(response) { 
            var data = [];
                for (var i = 0; i < response.length; i++) {
                    data.push({
                        startDate: new Date(response[i].startdate),
                        endDate: new Date(response[i].enddate),
                        color : response[i].color
                    }); 
                }  
             $('#calendar').calendar({ 
                    enableRangeSelection: false,
                    minDate:new Date(currentYear,0,1),
                    maxDate:new Date(currentYear,11,31),
                    dataSource: data
                    });  
             },
           error: function (error) {
           alert(error);
          }
    });
});      
</script>