JQuery: (window).resize works, (document).ready doesn't

Question

I am having some issues getting this JQuery script to work. It works flawlessly when resizing the image, but I can't get this to work on the initial page load. Any ideas? I'm completely stuck and nothing is working for me.

   <script type="text/javascript">
        $(window).resize(function () {
            if ($(window).width() <= 600) {
                $('#fcalendar').fullCalendar('changeView', 'basicDay');
            } else if ($(window).width() < 748) {
                $('#fcalendar').fullCalendar('changeView', 'basicDay');
            } else {
                $('#fcalendar').fullCalendar('changeView', 'month');
            }
        });

        $(document).ready(function () {
            if ($(document).width() <= 600) {
                $('#fcalendar').fullCalendar('changeView', 'basicDay');
            } else if ($(window).width() < 748) {
                $('#fcalendar').fullCalendar('changeView', 'basicDay');
            } else {
                $('#fcalendar').fullCalendar('changeView', 'month');
            }
        });
    </script>

Answer 1

As indicated in comments, document.ready != window.onload. Document.ready will not wait for the images to actually load. Thus, it can give bad results. You should hook into the window.onload event when you want to wait for images to fully finish (this is also the mechanism used in parallax sites which need to wait for images to load).

window.onload = function () {
        if ($(document).width() <= 600) {
            $('#fcalendar').fullCalendar('changeView', 'basicDay');
        } else if ($(window).width() < 748) {
            $('#fcalendar').fullCalendar('changeView', 'basicDay');
        } else {
            $('#fcalendar').fullCalendar('changeView', 'month');
        }
};