SyncFusion:本地化甘特图

时间:2016-03-22 11:04:18

标签: localization calendar syncfusion

我正在尝试本地化甘特元素。但是我遇到了一些问题。

我看过http://help.syncfusion.com/aspnet/gantt/localization 并写下这段代码:

<div style="width:100%; height:800px;">
    @(Html.EJ().Gantt("ganttsample")

    .TaskIdMapping("TaskID")
    .TaskNameMapping("TaskName")
    .StartDateMapping("StartDate")
    .EndDateMapping("EndDate")
    .DurationMapping("Duration")
    .ProgressMapping("Progress")
    .ScheduleStartDate("01/01/2016")
    .ScheduleEndDate("31/12/2016")
    .DateFormat("dd/MM/yyyy")
    .HighlightWeekends(true)
    .TreeColumnIndex(1)
    .ShowGridCellTooltip(true)
    .ChildMapping("SubTasks")
    .AllowSelection(true)
    .AllowGanttChartEditing(true)
    .PredecessorMapping("Predecessors")
    .AllowColumnResize(true)
    .AllowSorting(true)
    .IncludeWeekend(false)
    .ResourceInfoMapping("IdEstado")
    .ResourceNameMapping("ResourceName")
    .ResourceIdMapping("ResourceID")
    .ShowResourceNames(true)
    .EnableContextMenu(true)
    .Locale("es-ES")
    .EditSettings(edit =>
    {
        edit.AllowAdding(true);
        edit.AllowDeleting(true);
        edit.AllowEditing(true);
        edit.EditMode("cellEditing");
    })
    .EnableResize(true)
    .EnableVirtualization(false)
    .ToolbarSettings(toolbar =>
    {
        toolbar.ShowToolbar(true);
        toolbar.ToolbarItems(new List<GanttToolBarItems>()
        {
            GanttToolBarItems.Add,
            GanttToolBarItems.Search,
            GanttToolBarItems.Edit,
            GanttToolBarItems.Delete,
            GanttToolBarItems.Update,
            GanttToolBarItems.Cancel,
            GanttToolBarItems.Indent,
            GanttToolBarItems.Outdent,
            GanttToolBarItems.ExpandAll,
            GanttToolBarItems.CollapseAll
        });
    })
    .SizeSettings(ss => ss.Width("100%").Height("100%"))
    .Resources(ViewBag.datasource1)
    .Datasource(ViewBag.datasource)
    )
</div>

 <script type="text/javascript">



        ej.Gantt.localization["es-ES"] = {



    //headerText to be displayed in gridtree

    columnHeaderTexts: {

        taskId: "ID",

        taskName: "Nombre",

        startDate: "F. Inicio",

        endDate: "F. Fin",

        resourceInfo: "Otra Cosa",

        duration: "Duración",

        status: "Progreso",

        predecessor: "Predecesor",

        baselineStartDate: "F. Inicio Base",

        baselineEndDate: "F.Fin Base"

    },



    //string to display in dialog

    editDialogTexts: {

        addFormTitle: "Nueva Tarea",

        editFormTitle: "Editar tarea",

        saveButton: "Guardar",

        cancelButton: "Cancelar"

    },

    contextMenuTexts: {
        taskDetailsText: "Detalle",
        addNewTaskText: "Nueva tarea",
        indentText: "Indexar >",
        outdentText: "< Desindexar",
        deleteText: "Eliminar",
        aboveText: "Arriba",
        belowText: "Abajo"
    },

    calendars: {

        standard: {

            firstDay: 1,

            days: {

                names: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"],

                namesAbbr: ["Dom.", "Lun.", "Mar.", "Mié.", "Jue.", "Vie.", "Sáb."],

                namesShort: ["D", "L", "M", "X", "J", "V", "S"]

            },

            months: {

                names: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre", ""],

                namesAbbr: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic", ""]

            },

            AM: null,

            PM: null,

            eras: [{ "name": "ap. J.-C.", "start": null, "offset": 0 }],

            patterns: {

                d: "dd/MM/yyyy",

                D: "dddd d MMMM yyyy",

                t: "HH:mm",

                T: "HH:mm:ss",

                f: "dddd d MMMM yyyy HH:mm",

                F: "dddd d MMMM yyyy HH:mm:ss",

                M: "d MMMM",

                Y: "MMMM yyyy"

            }

        }

    }

}

    </script>

但是,正如您可以看到图像一样,日历无法呈现: enter image description here

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

要针对特定​​文化呈现Syncfusion Gantt控件,请确保已引用以下外部和内部脚本和主题文件。

<script src="@Url.Content("~/Scripts/jquery-2.1.4.min.js")"></script>       
<script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.easing-1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>   
<script src="@Url.Content("~/Scripts/ej.web.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/cultures/ej.culture.es-ES.min.js")"></script>
  

错误:无法读取属性&#39;日历&#39; null。

只有在您错过推荐以下culture js文件时才会出现此错误。

<script src="@Url.Content("~/Scripts/cultures/ej.culture.es-ES.min.js")"></script>

如果您遇到任何其他问题,请参阅此文件并告知我们。

希望这有帮助!