Printing the month view

[Rachael]

I'm trying to get the scheduler to print out the month view exactly as it appears on the screen, but I'm having trouble. I tried the advice at the bottom of this page: http://docs.kendoui.com/getting-started/web/scheduler/overview, but it didn't fix the issue.

The event "blocks" aren't placed in the correct location(s). I've attached screenshots of the scheduler and of the print preview. It seems this is the case for the scheduler in the demo too - does this mean the scheduler is not printable in month view?

Thanks,

Rachael

[Dimo]

Hi Rachael,

I can reproduce the described problem in Google Chrome in portrait paper mode. Switching to landscape mode seems to work fine. I also suppose that you could support portrait mode by using a smaller Scheduler.

Regards,
Dimo
Telerik

[Rachael]

Dimo,

Thanks for your reply. I can confirm that switching to landscape mode fixes the problem in the Kendo demos; however, it does not fix my problem. I tried referencing the latest styles/scripts and that seems to improve things, but I'm still not seeing all the items, nor am I seeing them on the appropriate dates (see attached).

Any help you can offer would be greatly appreciated. If you'd like, I can privately send you the URL for this site, plus a login/password for accessing the page with the scheduler on it.

Thank you,

Rachael

[Dimo]

Hello Rachael,

First of all, I hope you have read our documentation and applied the CSS code suggested at:

http://docs.kendoui.com/getting-started/web/scheduler/overview#printing

I see you have scrollbars on the print preview, which naturally hide parts of the widget. This usually makes no sense during printing. (On a side note, the Scheduler can have a disabled scrollbar during prinnting.)

Do you have any print-specific styles, that would break the Scheduler header cells' alignment? The div.k-scheduler-header element should have a padding that matches the scrollbar width. That padding is missing in your case.

I am sending you a page, which works as expected. Please compare with your implementation.

Regards,
Dimo
Telerik

[Rachael]

Dimo,

Sorry it took so long to get back to you. Yes, I did read that document as I mentioned in the initial post and applied those styles. In terms of the k-scheduler-header, what is the scrollbar width? Is that a fixed value or calculated on the fly?

In terms of the print styles, I haven't made any changes outside the ones expressly defined in the link in the documentation. For the display styles, we made the following changes:

    function setMonthView() {
        $(".k-event").css("height", "auto");
        $("div[data-needsShortening='true']").height("20px");
        $("div[data-needsShortening='true']").css("white-space", "nowrap").css("text-overflow", "ellipsis").css("overflow", "hidden").css("padding-left", "0").css("padding-right", "5px");
  }

This function gets called when the user navigates to the "month" view. We define all the data elements that are not the last one occurring on that day with the data-needsShortening='true' attribute/value. We do this because 99% of the time, there is only ever one event on a given day and the title of that event is longer than the width of the day. The client wanted to see the entire title for that day and not have it cut off after 2-3 words, nor was mousing over the event to see the full title acceptable to them. Is there something about these changes that are messing up the print view?

Thank you,

Rachael

[Dimo]

Hello Rachael,

The scrollbar width is calculated by the Scheduler scripts on the fly. Depending on the OS and browser it is usually around 17px.

Does the demo I sent previously, work correctly on your side? If yes, then I suggest you to modify it until the discussed problem is exhibited and then send it back.

Regards,
Dimo
Telerik

[Rachael]

Dimo,

Yes, the demo works correctly on my side. I made the following singular modification and the print no longer works correctly:

change height: 400 to height: 1000

When I made this change, the print preview looks like it retained the original height of 400 instead of the height I supplied of 1000.

Rachael

[Dimo]

Hi Rachael,

Right, it seems this scenario is not covered by the documentation example, which shows how to make a scrollable Scheduler non-scrollable, but not how to handle a very high non-scrollable Scheduler, which is a more rare case. Please do the following:

- remove the Scheduler height setting
- use the following CSS instead of the previously provided one

@media print {
   .k-scheduler,
   .k-scheduler-content,
   .k-scheduler-times
   {
      height: auto !important;
   }
}

.k-scheduler-content
{
  overflow-y: scroll !important;
}

.k-scheduler .k-scheduler-monthview .k-scheduler-content .k-scheduler-table
{
  height: 1000px;
}

Regards,
Dimo
Telerik

[Rachael]

Dimo,

Thanks for the quick response. Did you intentionally move:

.k-scheduler-content{  overflow-y: scroll !important;} 

outside the @media print {} block? Or was that an oversight?

Rachael

[Rachael]

BTW, I removed the height on the scheduler in my project, added .k-scheduler .k-scheduler-monthview .k-scheduler-content .k-scheduler-table
{
  height: 900px !important;
}

to my stylesheet and it doesn't seem to be stretching out the calendar in print view. Any ideas? I can send the URL, if you want...

[Dimo]

Hello Rachael,

The provided CSS code should be used exactly as is. In other words - yes, I moved some of the code outside the print CSS on purpose.

In order to prevent further message roundtrips and guesswork, here is the updated example. You can also refer to the attached screenshot.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Scheduler printing</title>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<style>
html
{
    font:12px sans-serif;
}

@media print {
   .k-scheduler,
   .k-scheduler-content,
   .k-scheduler-times
   {
      height: auto !important;
   }
}

.k-scheduler-content
{
  overflow-y: scroll !important;
}

.k-scheduler .k-scheduler-monthview .k-scheduler-content .k-scheduler-table
{
  height: 1000px;
}

</style>
</head>
<body>

<div id="scheduler" style="width: 800px"></div>

<script>

$(function() {
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        views: [
            { type: "month", selected: true }
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "http://demos.kendoui.com/service/meetings",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.kendoui.com/service/meetings/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "http://demos.kendoui.com/service/meetings/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://demos.kendoui.com/service/meetings/destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "meetingID",
                    fields: {
                        meetingID: { from: "MeetingID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        roomId: { from: "RoomID", nullable: true },
                        atendees: { from: "Atendees", nullable: true },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            }
        },
        resources: [
            {
                field: "roomId",
                dataSource: [
                    { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
                    { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
                ],
                title: "Room"
            },
            {
                field: "atendees",
                dataSource: [
                    { text: "Alex", value: 1, color: "#f8a398" },
                    { text: "Bob", value: 2, color: "#51a0ed" },
                    { text: "Charlie", value: 3, color: "#56ca85" }
                ],
                multiple: true,
                title: "Atendees"
            }
        ]
    });
});

</script>

</body>
</html>

Regards,
Dimo
Telerik