Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Daniel Rogers 134 posts 712 karma points
    Nov 05, 2017 @ 11:29
    Daniel Rogers
    0

    Integrating Event Calendar into uSkin skin layout

    I have installed v3.4.1 and are trying to evaluate it before I purchace.

    From what I have seen it looks good.

    By the way I are running it on umbraco 7.6.5 and it runs as I expected it to.

    But I need it to be integrated into a uSkinned layout.

    I have you got any documentation as to how to do this.

    I believe I will need to custom write a Partial view that will site under the advanced or standard component folders in the skin.

    I have modified the case statements in the Advanced page cshtml for the skin.

    I have created a new doc type for the skin

    I have copied the EECalendar and created a partial view but are getting stuck on the 2 Bold Lines.

    @inherits Umbraco.Web.Mvc.UmbracoViewPage

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/moment.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/fullcalendar.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/gcal.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/lang-all.js")"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Nov 06, 2017 @ 07:52
    David Brendel
    0

    Hi Daniel,

    haven't done an integration into a uSkinned theme myself.

    The package works with some DocumentTypes that are used to render the calendar and the detail pages. I'm using Route Hijacking with Controllers to fetch all data and display it on the page. So you would be easiest to use the DocumentTypes that come with the package. The view itself can be adjusted.

    Sadly I can't see the bold lines as the code you pasted in is wrongly formatted. Can you only add the two lines again?

    Regards David

  • Daniel Rogers 134 posts 712 karma points
    Nov 06, 2017 @ 08:33
    Daniel Rogers
    0

    It seems that all the code I posted didnt go up.

    line 1

    var sources = @Html.Raw(Json.Encode(Model.Sources)); which I have changed to var sources = @Model.Calendar;

    line 2

    defaultView: '@Model.View',

  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Nov 06, 2017 @ 09:23
    David Brendel
    0

    Ok so the first line is about the sources of one or more calendar. The sources are a url with different parameter which are created in the default controller for the DocumentType and then returned.

    The second line is about how the view of the calendar should be shown. If a single calendar is shown it is the selected view of this calendar. If all calendar should be shown then it defaults to 'month'.

    You can get the sources in your custom code by:

    var queryDispatcher = EventCalendarServiceContainer.GetService<IQueryDispatcher>();
    var result = queryDispatcher.Dispatch<GetCalendarSourcesQuery, GetCalendarSourcesQueryResult>(
                new GetCalendarSourcesQuery { CalendarId = selectedCalendar, Culture = model.CurrentCulture.ToString() });
    

    The selectedCalendar is the id of a calendar or 0 for all calendar.

  • Daniel Rogers 134 posts 712 karma points
    Nov 06, 2017 @ 10:45
    Daniel Rogers
    0

    Cool so that sorted the first.

    How do I get the second.

  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Nov 06, 2017 @ 14:07
    David Brendel
    0

    Hi Daniel,

    sorry forgot the second. Basically with the sources you can select the correct view like this: string view = result.Sources.Count == 1 ? ((dynamic)result.Sources.First()).view : "month";

    Regards David

  • Daniel Rogers 134 posts 712 karma points
    Nov 09, 2017 @ 03:51
    Daniel Rogers
    0

    Hi David

    It looks like Gurmail and I are having the same issue trying to integrate this into our sites.

    If you could put up a detailed step by step on how to implement a calendar as a partial view from scratch would be greatly appreciated as I am also lost as to what you are suggesting.

  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    Nov 09, 2017 @ 12:02
    David Brendel
    0

    Hi Daniel,

    I can try. It depends a bit on how you want to render the partial. Just use Html.Partial() or are you using a SurfaceController by calling Html.Action().

    Basically you need to get an id of a calendar. You can add the calendar picker which is provided to your document type on which you want to show a calendar, using static 0 for getting all calendar or getting a calendar id by using the api.

    The rendering and fetching of the sources looks like in this gist: https://gist.github.com/Mantus667/a05a70e7606934982a4fb415584d8d5a

    Then you also need to include the necessary css/js files for fullcalendar in your view of course. And should be all to render the calendar in a partial.

    Hope that helps.

    Regards David

  • Daniel Rogers 134 posts 712 karma points
    Dec 19, 2017 @ 03:33
    Daniel Rogers
    0

    This worked with a few additional changes.

    use https://gist.github.com/Mantus667/a05a70e7606934982a4fb415584d8d5a

    add to the beginning @inherits UmbracoViewPage<"name of the document type"> add after line 6 @using System.Globalization;

    replace line 14-17 with

    @{

    @Html.AntiForgeryToken()

            <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/moment.min.js")"></script>
            <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/fullcalendar.min.js")"></script>
            <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/gcal.js")"></script>
            <script type="text/javascript" src="@Url.Content("~/js/EventCalendar/lang-all.js")"></script>
            <script type="text/javascript" src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
        </div>
    </div>
    

    add at the end }

    add to patrial views/advanced components/USN_Advancedpagecomponents.cshtml into the switch case

                case "document type".ModelTypeAlias:
                    @Html.Partial("cshtml file from above", ("document type") component)
                    break;
    
  • Daniel Rogers 134 posts 712 karma points
    Dec 19, 2017 @ 03:34
    Daniel Rogers
    0

    I now need to get the next part working.

    when I click on the event to get the detail popup I get the following error screen.

    Server Error in '/' Application. Illegal characters in path. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.ArgumentException: Illegal characters in path.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [ArgumentException: Illegal characters in path.] System.IO.Path.CheckInvalidPathChars(String path, Boolean checkAdditional) +11794484 System.IO.Path.GetExtension(String path) +21 Umbraco.Core.UriExtensions.IsClientSideRequest(Uri url) +19 Umbraco.Web.UmbracoModule.BeginRequest(HttpContextBase httpContext) +64 Umbraco.Web.UmbracoModule.

    Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.6.1055.0

Please Sign in or register to post replies

Write your reply to:

Draft