search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How do I make my DayPilot Month Calendar to be Read Only in Asp.Net MVC?

Asked by jack
5 years ago.

I have my DayPilot Month Calendar working in my Project however I want to make it a read only calendar. I found an article on how to do it but I'm not sure how to add it to my code. Could someone help me with my code or provide more links on how to do it?

I think this tutorial is how you do it but I don't know how to implement it into my code:
https://kb.daypilot.org/15969/how-to-make-the-calendar-events-read-only/

I followed these two Tutorials to add the DayPilot Month Calendar to work in my ASP.NET MVC project.

https://www.codeproject.com/script/Articles/ArticleVersion.aspx?aid=404647&av=1059127&fid=1732162&df=90&mpp=25&prof=True&sort=Position&view=Normal&spc=Relaxed&fr=81

And for Month https://code.daypilot.org/10607/monthly-event-calendar-for-asp-net-mvc-and-jquery-open-source

My Code is as follows:

Home Controller
 public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Backend()
    {
        return new Dpm().CallBack(this);
    }

    class Dpm : DayPilotMonth
    {
        DataClasses1DataContext db = new DataClasses1DataContext();

        protected override void OnInit(InitArgs e)
        {
            Update(CallBackUpdateType.Full);
        }

        protected override void OnEventResize(EventResizeArgs e)
        {
            var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
            toBeResized.eventstart = e.NewStart;
            toBeResized.eventend = e.NewEnd;
            db.SubmitChanges();
            Update();
        }

        protected override void OnEventMove(EventMoveArgs e)
        {
            var toBeResized = (from ev in db.Events where ev.id == Convert.ToInt32(e.Id) select ev).First();
            toBeResized.eventstart = e.NewStart;
            toBeResized.eventend = e.NewEnd;
            db.SubmitChanges();
            Update();
        }

        protected override void OnTimeRangeSelected(TimeRangeSelectedArgs e)
        {
            var toBeCreated = new Event { eventstart = e.Start, eventend = e.End, text = (string)e.Data["name"] };
            db.Events.InsertOnSubmit(toBeCreated);
            db.SubmitChanges();
            Update();
        }


        protected override void OnFinish()
        {
            if (UpdateType == CallBackUpdateType.None)
            {
                return;
            }

            Events = from ev in db.Events select ev;

            DataIdField = "id";
            DataTextField = "text";
            DataStartField = "eventstart";
            DataEndField = "eventend";
        }

    }
}
Index Page
@{

  ViewBag.Title = "AJAX Monthly Event Calendar for ASP.NET MVC";
 }

<script src="~/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/daypilot-all.min.js" type="text/javascript"></script>

<div id="dpm"></div>

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig
{
BackendUrl = Url.Content("~/Home/Backend"),

EventMoveHandling = 
DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.CallBack,
EventResizeHandling = 
DayPilot.Web.Mvc.Events.Month.EventResizeHandlingType.CallBack,
TimeRangeSelectedHandling = 
DayPilot.Web.Mvc.Events.Month.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript =
"dpc.timeRangeSelectedCallBack(start, end, null, { name: prompt('New Event 
Name:', 'New Event') });"
})
<script type="text/javascript">
var dp;

$(document).ready(function() {
dp = $("#dpm").daypilotMonth({
  backendUrl: '@Url.Content("~/Home/Backend")',
  eventMoveHandling: "CallBack",
  eventResizeHandling: "CallBack",
  timeRangeSelectedHandling: "JavaScript",
  onTimeRangeSelected: function(args) { 
  dp.timeRangeSelectedCallBack(args.start, args.end, { name: prompt('New 
  Event Name:', 'New Event') }); }
  });

Answer posted by Dan Letecky [DayPilot]
5 years ago.

You can make it read-only by disabling the drag and drop actions one by one:

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig 
{ 
BackendUrl = Url.Content("~/Home/Backend"),

EventMoveHandling = 
DayPilot.Web.Mvc.Events.Month.EventMoveHandlingType.Disabled, 
EventResizeHandling = 
DayPilot.Web.Mvc.Events.Month.EventResizeHandlingType.Disabled, 
TimeRangeSelectedHandling = 
DayPilot.Web.Mvc.Events.Month.TimeRangeSelectedHandlingType.Disabled, 
}) 

Note: The jQuery initialization using $("dpm").daypilotMonth() is an alternative to the @Html.DayPilotMonth() syntax. You shouldn't use both at the same time.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.